1.1

node.js

 入口文件

//根目录下入口文件
//导入express模块
const express = require('express')
//创建实例
const app = express()
const joi = require('joi')
//引入cors中间件 配置为全局中间件 支持跨域
const cors = require('cors')
app.use(cors())
//引入配置解析 `application/x-www-form-urlencoded` 格式的表单数据的中间件
//express的内置中间件
app.use(express.urlencoded({ extended: false }))
//为了简化res.send()代码 封装一个函数 声明一个中间件 在之后的路由中使用
app.use((req, res, next) => {
    //定义函数
    res.cc = (err,status=1) => {
        res.send({
            status,
            message:err instanceof Error ? err.message:err
        })
    }
    next()
})
//导入并注册路由模块
const userRouter = require('./router/user')
app.use('/api', userRouter)//api为访问前缀
//定义错误级别的中间件
app.use(function (err, req, res, next) {
    // 数据验证失败
    if (err instanceof joi.ValidationError) return res.cc(err)
    // 未知错误
    res.cc(err)
  })
//监听启动
app.listen(3007, () => {
    console.log('api server running at http://127.0.0.1:3007')
})

路由

//只存放客户端请求与处理函数之间的关系
//引入express
const express=require('express')
//创建路由对象
const router = express.Router()
//导入router_handler中的user.js
const userHandler = require('../router_handler/user.js')
//导入验证数据的中间件
const expressJoi = require('@escook/express-joi')
//导入需要验证的规则对象
const {text}=require('../schema/user.js')

//注册新用户  使用这个中间件 
router.post('/reguser',expressJoi(text),userHandler.regUser )

//登录
router.post('/login',userHandler.login )

//路由对象共享
module.exports = router

 路由函数

//抽离用户路由模块中的处理函数
//导入数据库模块
const db = require('../db/index.js')
//导入bcryptjs模块
const bcrypt=require('bcryptjs')
//注册模块
exports.regUser = (req, res) => {
    //1.检测表单是否合法
    //接收表单数据
    const userinfo = req.body
    //判断数据是否合法
    // if (!userinfo.username || !userinfo.password) {
    //     return res.send({
    //         status: 1,
    //         message:'用户名或者密码不能为空'
    //     })
    // }

    //2.监测用户名是否被占用 需要导入数据库模块
    const sql1 = 'select * from ev_users where username=?'
    db.query(sql1, userinfo.username, (err,results) => {
        if (err) {
            // return res.send({status:1 ,message:err.message})
            return res.cc(err)
        }
        if (results.length > 0) { //查询返回的是数组 如果数组里有数据 长度大于零 说明用户已存在
            // return res.send({status:1, message:'用户名已存在 请更换'})
          return   res.cc('用户名已存在 请更换')
        }
    
        //给符合要求的用户密码加密
    userinfo.password = bcrypt.hashSync(userinfo.password, 10)
    //插入注册的新用户信息
        const sql2 = 'insert into ev_users set ?'
        db.query(sql2, { username: userinfo.username, password: userinfo.password }, (err, results) => {
            if (err) {
                // return res.send({status:1 ,message:err.message})
             return    res.cc(err)
            }
            //语句执行成功但是影响行数不唯一 也是失败
            if (results.affectedRows !== 1) {
                // return res.send({status:1, message:'注册用户失败 稍后再试'})
                return res.cc('注册用户失败 稍后再试')
            }
            //注册成功
            // res.send({ status: 0, message: '注册成功' })
            res.cc('注册成功',0)
        })
    })
   


}
//登录模块
exports.login = (req,res) => {
    res.send('login ok')
}

 与数据库联系

//导入mysql模块
const mysql = require('mysql')
//与数据库联系
const db = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: 'admin123',
    database:'my_db_01'
})
//暴露
module.exports = db

 验证规则

//优化表单数据验证


//用户信息验证规则模块
const joi = require('joi')
//用户名验证规则
const username = joi.string().alphanum().min(1).max(10).required()
//密码验证规则
const password = joi.string().pattern(/^[\S]{6,12}$/).required() //非空字符6-12位
//暴露验证规则
exports.text = {
    body: { //验证表单数据req.body上的username password
        username,
        password
    },
}

 user 

//抽离用户路由模块中的处理函数
//导入数据库模块
const db = require('../db/index.js')
//导入bcryptjs模块
const bcrypt = require('bcryptjs')
//导入jsonwebtoken包
const jwt = require('jsonwebtoken')
//导入配置密匙的文件
const config=require('../config.js')
//注册模块
exports.regUser = (req, res) => {
    //1.检测表单是否合法
    //接收表单数据
    const userinfo = req.body
    //判断数据是否合法
    // if (!userinfo.username || !userinfo.password) {
    //     return res.send({
    //         status: 1,
    //         message:'用户名或者密码不能为空'
    //     })
    // }

    //2.监测用户名是否被占用 需要导入数据库模块
    const sql1 = 'select * from ev_users where username=?'
    db.query(sql1, userinfo.username, (err,results) => {
        if (err) {
            // return res.send({status:1 ,message:err.message})
            return res.cc(err)
        }
        if (results.length > 0) { //查询返回的是数组 如果数组里有数据 长度大于零 说明用户已存在
            // return res.send({status:1, message:'用户名已存在 请更换'})
          return   res.cc('用户名已存在 请更换')
        }
    
        //给符合要求的用户密码加密
    userinfo.password = bcrypt.hashSync(userinfo.password, 10)
    //插入注册的新用户信息
        const sql2 = 'insert into ev_users set ?'
        db.query(sql2, { username: userinfo.username, password: userinfo.password }, (err, results) => {
            if (err) {
                // return res.send({status:1 ,message:err.message})
             return    res.cc(err)
            }
            //语句执行成功但是影响行数不唯一 也是失败
            if (results.affectedRows !== 1) {
                // return res.send({status:1, message:'注册用户失败 稍后再试'})
                return res.cc('注册用户失败 稍后再试')
            }
            //注册成功
            // res.send({ status: 0, message: '注册成功' })
            res.cc('注册成功',0)
        })
    })
   


}
//登录模块
exports.login = (req, res) => {
    //1.检测表单数据是否合法 在router 下user.js已经配置检测用户信息的中间件
    //2.根据用户名查询用户数据
    const userinfo=req.body
    const sql = 'select * from ev_users where username=?'
    db.query(sql, userinfo.username, (err,results) => {
        if (err) {
            return res.cc(err)
        }
        if (results.length !== 1) {
           return res.cc(' 用户名不正确 登录失败') 
        }
        //用户名正确 接下来判断输入的密码是否正确
        //数据库密码与用户输入的密码进行对比 调用bcrypt.compareSync 返回布尔值
        const compareResult=bcrypt.compareSync(userinfo.password,results[0].password)
        if (!compareResult) {
             return res.cc('登录失败')
        }
        //登录成功 服务器生成token字符串
        //因为是保存在客户端的 所以要剔除密码 头像这两个敏感信息
        const user = { ...results[0], password: '', user_pic: '' }
       //生成token字符串
        const tokenStr = jwt.sign(user, config.jwtSecretKey, {
            expiresIn:'10h'
        })
        //将生成的token响应给客户端
        res.send({
            status: 0,
            message: '登陆成功',
            token:'Bearer '+tokenStr
       })
        

    })
 
}

userinfo 

const db = require('../db/index.js')
const bcrypt = require('bcryptjs')

exports.getUserInfo = (req,res) => {
  //获取用户基本信息 查询数据库是否有用户信息
    //导入数据库模块
    const db = require('../db/index.js')
    const sql1='select id, username,nickname,email,user_pic from ev_users where id=?'
    db.query(sql1, req.user.id, (err,results) => {
        if (err) {
            return res.cc(err)
        }
        if (results.length !== 1) {
            return res.cc('获取用户失败')
        }
        res.send({
            status: 0,
            message: '获取用户信息成功',
            data: results[0],
        })
    })

}
exports.updateUserInfo = (req,res) => {
    const sql2 = 'update ev_users set ? where id=?'
    db.query(sql2, [req.body, req.body.id], (err, results) => {
        if (err) {
            return res.cc(err)
        }
        if (results.affectedRows !== 1) {
            return res.cc('更新失败')
        }
        return res.cc('更新成功',0)
    })
}
exports.updatePassword = (req, res) => {
    //查询用户是否存在
    const sql3 = 'select * from ev_users where id=?'
    db.query(sql3, req.user.id, (err, results) => {
        if (err) {
            return res.cc(err)
        }
        if (results.length !== 1) {
            return res.cc('用户不存在')
        }
        //判断用户输入密码正确与否 需要引入bcrypt 模块
      const compareResult=bcrypt.compareSync(req.body.oldPwd,results[0].password)
        if (!compareResult) {
          return res.cc('原密码错误')
        }
        //将新密码加密并且更新数据库密码
        //加密
        const newPwd = bcrypt.hashSync(req.body.newPwd, 10)
        //更新
        const sql4 = 'update ev_users set password=? where id=?'
        db.query(sql4, [newPwd, req.user.id], (err, results) => {
            if (err) {
                return res.cc(err)
            }
            if (results.affectedRows !== 1) {
                return res.cc('更换失败')
            }
            res.cc('更换成功',0)
        })
        
    })
}

 配置userinfo路由

//此模块是用户登录后的个人中心
const express = require('express')
const router = express.Router()
const userinfo_handler = require('../router_handler/userinfo')
//配置更新的验证表单数据的模块
const expressJoi = require('@escook/express-joi')
const {update}=require('../schema/user.js')
const {update_pwd}=require('../schema/user')
router.get('/userinfo', userinfo_handler.getUserInfo)
//更新用户信息
router.post('/userinfo', expressJoi(update), userinfo_handler.updateUserInfo)
//重置密码路由
router.post('/updatepwd',expressJoi(update_pwd) ,userinfo_handler.updatePassword)
module.exports=router

验证 

//优化表单数据验证


//用户信息验证规则模块
const joi = require('joi')
//用户名验证规则
const username = joi.string().alphanum().min(1).max(10).required()
//密码验证规则
const password = joi.string().pattern(/^[\S]{6,12}$/).required() //非空字符6-12位
//id验证规则
const id=joi.number().integer().min(1).required()
//nickname验证规则
const nickname=joi.string().required()
//email验证规则
const email=joi.string().email().required()
//暴露验证规则
exports.text = {
    body: { //验证表单数据req.body上的username password
        username,
        password,
        
    },
}
exports.update = {
    body: {
        id,
        nickname,
        email
    }
}
exports.update_pwd = {
    body: {
        oldPwd: password,
        newPwd:joi.not(joi.ref('oldPwd')).concat(password)
    }
}

复盘node.js部分项目

1.初始化包管理配置文件 用来检测安装的第三方包的相关信息

2.使用npm i 安装所需要的第三方包 指定版本

3.配置入口文件app.js   启动服务器

4.配置路由模块（单纯的对应关系）（router.js）

5.抽离路由函数关系模块(router_handler.js)

6.创建与数据库的联系的文件(index.js)

7.验证规则文件(user.js)

8.单独定义密匙文件(config.js)

9.在入口文件引入所需的全局中间件

10.优化重复代码 定义全局中间件封装函数

11.注意配置中间件时的顺序问题 错误中间件在路由之后

复盘axios部分

1.使用json-server快速搭建一个假的服务器

2.复盘具体写法

   <button>GET</button>
    <button>POST</button>
    <button>PUT</button>
    <button>DELETE</button>
    <script>
        const btns=document.querySelectorAll('button')
        
        btns[0].onclick=function(){
            axios({
                method:'GET',
                url:'http://localhost:3000/posts/2',

            }).then((response)=>{
         console.log(response)
            })
        }
        //往db.json里面添加数据
        btns[1].onclick=function(){
            axios({
                method:'POST',
                url:'http://localhost:3000/posts',//这里没有具体id
                //请求体
                data:{
                    title:'天气'
          
                }
            }).then((response)=>{
         console.log(response)
            })
        }
      //更新数据
      btns[2].onclick=function(){
        axios({
            method:'PUT',
            url:'http://localhost:3000/posts/3',
            data:{
                title:'季节'
            }

        }).then((response)=>{
         console.log(response)
            })
      }


      //删除数据
       btns[3].onclick=function(){
        axios({
            method:'DELETE',
            url:'http://localhost:3000/posts/6'
        })
       }
    </script>

3，默认配置

axios.defaults.method='GET'
        axios.defaults.baseURL='http://localhost:3000'
        axios.defaults.params={id:100}//url参数
        axios.defaults.timeout=3000 //三秒钟结果未返回取消请求
        btns[0].onclick=function(){
            axios({

                url:'posts',

            }).then((response)=>{
         console.log(response)
            })
        }

4.拦截器以及取消请求

复习vue重点

数据代理原理解析(简单的例子)

<script>
    //数据代理原理
    let obj={x:90}
    let obj2={y:0}
    Object.defineProperty(obj2,'x',{
        get(){
         return obj.x
        },
        set(value){
            obj.x=value
        }
    })


</script>

key的原理

<!-- 
  虚拟DOM算法
  旧虚拟DOM与新虚拟DOM对比 找到相同的key 
 用index作为key：对数据进行：逆序添加 删除等破坏顺序操作：会产生没有必要的DOM更新 效果没问题 效率低
                 如果有输入性DOM则会产生错误 界面有问题
                 建议使用唯一标识作为key 学号 id 等
 -->
<body>
    <div class="root1">
     <ul>
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}
            <input type="text">
        </li>
        <button @click="add">点我向前添加一个成员信息</button>

     </ul>
     
    </div>

</body>
<script>new Vue({
  el:'.root1',
  data:{
    persons:[
        { id:'001',name:'张三'},
        { id:'002',name:'李四'},
        { id:'003',name:'王五'}
    ]
  },
  methods:{
    add(){
        const p ={id:'004',name:'老刘'}
        this.persons.unshift(p)//往前加 push在后加
    }
  }
})
</script>

 监测数据改变原理

1.传入data

    2.加工data

    3.vm._data=data

    属性值一变 调用seter 重新解析模板 生成新的虚拟DOM 进行算法对比 更新页面

    1.vue会监视data中所有层次的数据

    2.如何监测对象中的数据：

     通过setter实现 并且要在new vue时就传入监测数据

     (1)后追加的属性 vue不做响应式的处理

     (2)如需要响应式 使用以下API:

     Vue.set(target propertyName value) 或者 vm.$set()

     3.监测数组中的数据

     (1)调用原生对应的数组的方法

     (2)重新解析模板 更新页面

     4.修改数组元素方法

     除了一些特定的API 还可以使用vue.set()

     5.vue.set不能给vm和vm的根数据对象vm._data添加属性

组件注意点(以school为例)

1.school组件本身是一个VueComponent的构造函数 是Vue.extend生成的

    2.写 <school/>标签 会解析创建school组件的实例对象

    3.每次调用Vue.extend 返回的是全新的VueComponent

    4.组件配置中 this指向是VueComponent实例对象(简称vc)  new vue指向是vue实例对象(简称vm)

生命周期

beforeCreat:无法访问data数据和methods方法

    初始化：数据代理 数据监测

    created:可以访问data methods

    vue开始解析 生成虚拟dom(内存中) 页面不显示解析好的内容

    beforeMount:页面是未经vue解析的

    将内存中的DOM转为真实的

    mounted:页面是vue编译好的DOM

    beforeUpdate:数据是新的 页面是旧的 数据页面不同步

    beforeDestroy:清除定时器 解绑自定义事件 原生DOM还可以操作 可以访问数据 调用方法

    但是对数据的修改不会触发更新

 基本列表

<ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}} {{index}}
        </li>
     </ul>
     <ul>
        <li v-for="(value,k) in car" :key="k">{{k}}--{{value}}</li>
     </ul>
    </div>

</body>
<script>new Vue({
  el:'.root1',
  data:{
    //遍历数组
    persons:[
        //数据有顺序用数组存
        //每个人是个对象
        { id:'001',name:'张三'},
        { id:'002',name:'张三'},
        { id:'003',name:'张三'}
    ],
    //遍历对象
    car:{
        name:'aodi',
        price:'1200',
        color:'pink'
    }
  }
})

列表过滤

 new Vue({
  el:'.root1',
  data:{
    keyword:'',
    persons:[
        { id:'001',name:'马冬梅',age:19},
        { id:'002',name:'周冬雨',age:19},
        { id:'003',name:'周杰伦',age:19},
        { id:'003',name:'温兆伦',age:19}

    ]
  },
  computed:{
    filpersons(){
      //将过滤出的数据返回
     return this.persons.filter((p)=>{
      //过滤出包含关键字的数据
            return p.name.indexOf(this.keyword)!== -1 
        })
    }
  }
  
})

 姓名案例

计算属性

 <div class="root1">
        姓: <input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        全名：{{fullName}}
    </div>
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        firstName:'张',
        lastName:'三'
      },
      computed:{
        //不需要在数据里配置fullname属性 是计算出来的
        //执行完往vm上放了个fullname的属性
      fullName(){
        //读取fullname时会调用get 初次读取还有数据被修改时被调用
            //简写相当于fullname()变为了getter使用
        return this.firstName+this.lastName
      }
    }
 })
</script>

 methods

<div class="root1">
        姓: <input type="text" v-model="firstname">
        名：<input type="text" v-model="lastname">
        <!-- 必须加括号 是函数的返回值展示 -->
        全名：{{fullname()}}
    </div>
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        firstname:'张',
        lastname:'三'
      },
      methods:{
        //函数
      fullname(){
        //手动调用 插值语法 需要展示返回值 需要写return 
      return this.firstname+this.lastname
      }
    }
 })
</script>

 条件渲染

<div class="root1">
    <h2>当前n的值为:{{n}}</h2>
    <button @click="n++">点我n加一</button>

    <div v-show="false"> 1234 </div>
    <div v-if="false"> 1234 </div>
    <div v-if="n==1">n的值是1</div>
    <!--if执行完后不看else if 即使else-if条件为真-->
    <div v-else-if="n==1">n的值是2</div>
    <div v-else-if="n==3">n的值是3</div>
    <!-- v-else 前面条件均不成立 则执行 不需要写条件-->
    <div v-else></div>
    <!-- v-if 只能和template配合使用 页面渲染的时候 template消失 不影响只有h2的结构-->
    <template >
        <h2>哈哈</h2>
        <h2>哈哈</h2>
        <h2>哈哈</h2>
    </template>
    
    
</div>
</body>
<script>
  new Vue({
    el:'.root1',
    data:{
      name:'张三',
      n:0
    }
  })
</script>

尚品汇 

1-7

（1）准备

1.1:node + webpack + VScode + git

2)脚手架使用

2: vue init webpack 项目的名字

3|4：vue create 项目名称

脚手架目录:public + assets文件夹区别

node_modules:放置项目依赖的地方

public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

src：程序员源代码文件夹

  -----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）

  -----components文件夹:一般放置非路由组件（或者项目共用的组件）

        App.vue 唯一的根组件

        main.js 入口文件【程序最先执行的文件】

        babel.config.js:babel配置文件

        package.json：看到项目描述、项目依赖、项目运行指令

        README.md:项目说明文件

3)脚手架下载下来的项目稍微配置一下

3.1:浏览器自动打开

        在package.json文件中

        "scripts": {

         "serve": "vue-cli-service serve --open",

          "build": "vue-cli-service build",

          "lint": "vue-cli-service lint"

        },

 

3.2关闭eslint校验工具

创建vue.config.js文件：需要对外暴露

module.exports = {

   lintOnSave:false,

}

3.3 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些

创建jsconfig.json文件

{

    "compilerOptions": {

        "baseUrl": "./",

        "paths": {

            "@/*": [

                "src/*"

            ]

        }

    },

    "exclude": [

        "node_modules",

        "dist"

    ]

 

4）路由的配置

vue-router

路由分为KV

前端路由:

K即为URL（网络资源定位符）

V即为相应的路由组件

（5）

5.1路由的一个分析

确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件

2个非路由组件|四个路由组件

两个非路由组件：Header 、Footer

路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

5.2安装路由

 cnpm install --save vue-router

--save:可以让你安装的依赖，在package.json文件当中进行记录

5.3创建路由组件【一般放在views|pages文件夹】

5.4配置路由，配置完四个路由组件
 

6)创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步:

第一步：定义

第二步：引入

第三步：注册

第四步:使用

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@6

2:需要在style标签的身上加上lang="less",不添加样式不生效