当前位置：网站首页>项目day(3) 前台环境搭建

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

2022-08-06 03:35:00 【初心魏】

项目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)
  • 对象解构
let user = {
    name: "jack",
    age: 29
}
let { name, age } = user
console.log(name, age)
  • 模板字符串
let name = 'jack'
let age = '99'
console.log(`我是${name},年龄是${age}`)
console.log(`第一行,
第二行`)

在这里插入图片描述

  • 声明对象的简写
let name = 'jack'
let age = '99'
let person = {
    name,
    age
}
console.log(person)
  • 定义方法的简写
let person = {
    name: "jack",
    // sayHi: function () {
    //     console.log("hi")
    // }
    sayHi() {
        console.log("hi")
    }
}
console.log(person.sayHi)
  • 对象拓展运算符，类似于对象拷贝，不会对原对象进行修改
let person = {
    name: 'jack',
    age: 23
}
let own = { ...person }
own.name = 'rose'
console.log(person.name)

1.5 js中注意的点

  • js中没有方法重载
function showMsg(name, age) {
    console.log(name,age)
}
function showMsg(name) {
    console.log(name)
}
//会调用第二个方法,不会调用第一个
showMsg("jack",23)
  • 2个=只判断内容,3个=可以判断类型
console.log('100' == 100) //true
console.log('100' === 100) //false
  • 函数参数默认值
//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.6 vue的一些知识点

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="ok">选择框
        <h1>{
   {ok}}</h1>
    </div>
</body>
<script src="./vue.min.js">
</script>
<script>
    new Vue({
        el: '#app',
        data:{
            name: "jack",
            ok: true
        }
    })
</script>
</html>

1.6.2 vue生命周期

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

1.6.3 跨域

  • 后端加上注解@CrossOrign

在这里插入图片描述

1.7 axios请求后端资源

  • axios中一定要用箭头函数，不然axios中的赋值操作不会影响到外部data
  • 或者用let _this = this
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <button @click="getlist()">查看列表</button> -->
        <ul v-for="item in dataList">
            <li>{
   {item.id}}</li>
            <li>{
   {item.name}}</li>
        </ul>
        <h1>{
   {name}}</h1>
    </div>
</body>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return{
              name: "",
              ok: true,
              dataList:[],
            }
        },
        created(){
          console.log("数据输出")
          this.getlist()
          console.log(this.name)
        },
        mounted(){
        },
        methods:{
            getlist(){
                //let _this = this
                axios.get("http://127.0.0.1:8110/admin/edu/teacher/list").then(response=>{
                    this.dataList = response.data
                    this.name = "jack"
                }).catch(err=>console.log(err))
            }
        }
    })
</script>
</html>
  • 不使用箭头函数
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.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.9 element-ui

1.9.1 引入

  • head中引入link
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
  • script中引入js
<script src="../element-ui/lib/index.js"></script>
  • 项目中引入element-ui的lib文件

1.9.2 element-ui的简单应用

  • scope.row能取到当前行的数据
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="dataList" style="width: 100%">
            <el-table-column prop="id" label="标签" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="级别" width="180">
                <template slot-scope="scope">
                    {
   {scope.row.level === 1 ? "高级讲师" : "普通讲师"}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</body>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dataList: [],
            }
        },
        created() {
            console.log("数据输出")
            this.getTeacherList2()
            console.log(this.dataList)
            console.log(this.name)
        },
        mounted() {
        },
        methods: {
            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))
            },
            //基础配置：返回值是一个函数
            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
                    console.log(this.dataList)
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    })
</script>

</html>

二、前端项目学习

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 [email protected]

  • 下载开发依赖，项目打包到生产环境时不会
    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")
    }
}
  • api中方法调用
import teacher from "./teacherApi.js"
teacher.getList()
teacher.setList()

2.2.2 babel转码

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

2.2.3 babel配置文件

  • 新建.babelrc

  • 添加配置

{
    "presets": [ "es2015"],
    "plugins": []
}
  • 安装转码器，安装到dev环境
npm install -D babel-preset-es2015
  • 转码操作
babel src -d dist
  • 运行dist下的js文件
    在这里插入图片描述

2.2.4 文件的分别导出导入

  • 导出
export function getList() {
    console.log("get list")
}
export function setList() {
    console.log("set list")
}
  • 引入
import {getList, setList} from "./teacherApi.js"
getList()
setList()

2.3 webpack

2.3.1 安装

 npm install webpack webpacck-cli

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']
            }
        ]
    }
}
  • 打包命令,就回打包到dist中的bundle.js文件中
 webpack --mode=development

2.3.3 打包css

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

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

  • style-loader:让js认识css

  • 插件安装

npm install -D css-loader style-loader

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']
            }
        ]
    }
}

2.3.5 main.js引入css

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

2.3.6 npm run dev

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

2.4 commonJs

  • common.js
exports.getName = function () {
    console.log("jack")
}
  • utils.js
exports.getAge = function () {
    console.log("12")
}
  • main.js
const common = require('./common.js')
const utils = require('./utils.js')
common.getName()
utils.getAge()
原网站

版权声明
本文为[初心魏]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_42306803/article/details/126118660

边栏推荐

猜你喜欢

随机推荐