• 项目day(3) 前台环境搭建

    项目day(3)前台环境搭建

    一、前端知识学习

    1.1 maven加入模块

    • 微服务模块没有被maven管理的解决方法
    • 使用maven加入pom文件即可

    在这里插入图片描述

    1.2 插件安装

    在这里插入图片描述

    1.2.1 中文界面配置

    在这里插入图片描述

    1.2.2 emmet设置

    在这里插入图片描述

    • ul>li*3
    • !+tab键

    1.3 let和var

    • let有局部作用域，{}外访问不到{}内定义的局部变量
    • var相同的关键字可以重新定义，let不行

    1.4 ES6一些语法新规范

    • ES6中有变量提升
    • const定义常量
    • 数组解构
    let arr = [1, 2, 3]
let [x, y, z] = arr
console.log(x,y,z)

    • 1
    • 2
    • 3
    • 对象解构
    let user = {
    name: "jack",
    age: 29
}
let { name, age } = user
console.log(name, age)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 模板字符串
    let name = 'jack'
let age = '99'
console.log(`我是${name},年龄是${age}`)
console.log(`第一行,
第二行`)

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    • 声明对象的简写
    let name = 'jack'
let age = '99'
let person = {
    name,
    age
}
console.log(person)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 定义方法的简写
    let person = {
    name: "jack",
    // sayHi: function () {
    //     console.log("hi")
    // }
    sayHi() {
        console.log("hi")
    }
}
console.log(person.sayHi)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 对象拓展运算符，类似于对象拷贝，不会对原对象进行修改
    let person = {
    name: 'jack',
    age: 23
}
let own = { ...person }
own.name = 'rose'
console.log(person.name)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1.5 js中注意的点

    • js中没有方法重载
    function showMsg(name, age) {
    console.log(name,age)
}
function showMsg(name) {
    console.log(name)
}
//会调用第二个方法,不会调用第一个
showMsg("jack",23)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 2个=只判断内容,3个=可以判断类型
    console.log('100' == 100) //true
console.log('100' === 100) //false


    • 1
    • 2
    • 3
    • 函数参数默认值
    //age赋默认值23
function showMsg(name, age = 23) {
    //这里是undifined判断,不是null判断
    if (!age) {
        console.log(name, age)
    } else {
        console.log(name)
    }
}
showMsg("jack")
showMsg("jack", null)
showMsg("jack", undefined)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    1.6 vue的一些知识点

    • v-bind:绑定的值一般要被计算
    {{name}}
    

    • 1
    • v-model双向数据绑定
      输入的数会影响原来的数值，视图变化会影响数据，数据变化也会影响视图。
    • v-on事件绑定，简写为@
    • 修饰符
      比如.prevent阻止表单的默认跳转行为
    • v-if:直接对底层dom修改，初始化开销小，切换开销大
    • v-show:其实控制的是display属性，不会直接删除dom节点，初始化开销大，切换开销小

    1.6.1 选择框与数据绑定，选中值为true，未选中为false

    


    
    
    
    Document


    
    
        选择框
        
    {{ok}}
    
    
    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    1.6.2 vue生命周期

    • created:页面创建成功，可以调用data和方法，但是页面还没有渲染成功
    • mounted:页面已经渲染成功

    1.6.3 跨域

    • 后端加上注解@CrossOrign

    在这里插入图片描述

    1.7 axios请求后端资源

    • axios中一定要用箭头函数，不然axios中的赋值操作不会影响到外部data
    • 或者用let _this = this
    


    
    
    
    Document


    
    
        
        
      
            
    • {{item.id}}
      • 
            
    • {{item.name}}
      • 
        
    
        
    {{name}}
    
    
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 不使用箭头函数
    getlist(){
                let _this = this
                axios.get("http://127.0.0.1:8110/admin/edu/teacher/list").then(function(res){
                    _this.dataList = res.data 
                    _this.name = "jack"

                }).catch(err=>console.log(err))
            }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.8 前端分层开发

    //基础配置：返回值是一个函数
             initRequest() {
                    return axios.create({
                        baseURL: 'http://localhost:8110',
                        timeout: 5000
                    })
                },

                //api调用
                teacherListApi() {
                    //request是一个函数
                    let request = this.initRequest()
                    return request({
                        url: '/admin/edu/teacher/list',
                        method: 'get'
                    })
                },

                //数据渲染
                getTeacherList2() {
                    console.log('getTeacherList2')
                    this.teacherListApi().then(response => {
                        this.dataList = response.data
                    }).catch(error => {
                        console.log(error)
                    })
                }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    1.9 element-ui

    1.9.1 引入

    • head中引入link
    

    • 1
    • script中引入js
    

    • 1
    • 项目中引入element-ui的lib文件

    1.9.2 element-ui的简单应用

    • scope.row能取到当前行的数据
    



    
    
    
    Document
    



    
    
        
            
            
            
            
            
                
            
        
    
    








    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87

    二、前端项目学习

    2.1npm

    2.1.1 npm -v

    2.1.2 npm init -y

    2.1.3 修改npm源

    npm config list

    2.1.4 下载依赖

    • 下载指定版本依赖

    npm install xx@xx

    • 下载开发依赖，项目打包到生产环境时不会
      npm install --save-dev xx
      npm i -D xx
    • 下载全局依赖

    npm install -g xx

    • 更新包
      npm upgrade xx
    • 还原依赖,根据package.json还原包
      npm install
    • npm init
      初始化npm目录

    2.2 js文件的导入导出

    2.2.1 文件的整体导入导出

    • api文件
    export default {
    getList() {
        console.log("get list")
    },
    setList() {
        console.log("set list")
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • api中方法调用
    import teacher from "./teacherApi.js"
teacher.getList()
teacher.setList()

    • 1
    • 2
    • 3

    2.2.2 babel转码

    • 将es6代码转为es5
    • es6代码编程起来更方便
    • babel-cli安装
     npm install -g babel-cli

    • 1

    2.2.3 babel配置文件

    • 新建.babelrc

    • 添加配置

    {
    "presets": [ "es2015"],
    "plugins": []
}

    • 1
    • 2
    • 3
    • 4
    • 安装转码器，安装到dev环境
    npm install -D babel-preset-es2015

    • 1
    • 转码操作
    babel src -d dist

    • 1
    • 运行dist下的js文件
      在这里插入图片描述

    2.2.4 文件的分别导出导入

    • 导出
    export function getList() {
    console.log("get list")
}
export function setList() {
    console.log("set list")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 引入
    import {getList, setList} from "./teacherApi.js"
getList()
setList()

    • 1
    • 2
    • 3

    2.3 webpack

    2.3.1 安装

     npm install webpack webpacck-cli

    • 1

    2.3.2 webpack.config.js配置文件

    • 项目根目录下
    const path = require("path") //Node.js内置模块

module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 打包命令,就回打包到dist中的bundle.js文件中
     webpack --mode=development

    • 1

    2.3.3 打包css

    • webpack只认识js,打包css需要loader插件

    • css-loader:将css装载到js上

    • style-loader:让js认识css

    • 插件安装

    npm install -D css-loader style-loader

    • 1

    2.3.4 配置css打包规则

    • webpack.config.js
    const path = require("path") //Node.js内置模块

module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.3.5 main.js引入css

    const common = require('./common.js')
const utils = require('./utils.js')
require("../css/style.css")
common.getName()
utils.getAge()

    • 1
    • 2
    • 3
    • 4
    • 5

    2.3.6 npm run dev

    • 将打包命令添加进package.json文件中的script位置
      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development"
  }

    • 1
    • 2
    • 3
    • 4

    2.4 commonJs

    • common.js
    exports.getName = function () {
    console.log("jack")
}

    • 1
    • 2
    • 3
    • utils.js
    exports.getAge = function () {
    console.log("12")
}

    • 1
    • 2
    • 3
    • main.js
    const common = require('./common.js')
const utils = require('./utils.js')
common.getName()
utils.getAge()

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    BioVendor sRAGE蛋白解决方案
    文件包含漏洞和hash破解
    大数据Hadoop之——Hadoop HDFS多目录磁盘扩展与数据平衡实战操作
    Bored Ape Yacht Club 生态系统指南
    网络层最重要的协议—IP协议
    【变化检测】国土资源典型要素变化遥感智能监测关键技术及应用
    小满Vue3第四十一章（docker 碰撞 vue3）
    SpringCloud Alibaba-Seata
    题目 1971: 外出旅游
    AIX 7.2 虚拟机 bash安装及 Aix 文件名补齐 使用优化篇
  • 原文地址：https://blog.csdn.net/qq_42306803/article/details/126118660