vue 项目环境搭建

项目目标：

    1）熟练掌握ajax的使用 （*****）

    2）熟悉前后端数据交互（***）

    3）熟悉elementui 框架的使用（***）

    4）熟悉vue的简单使用（***）

    5）了解后端增删改查的逻辑

    6）对整个项目的前后端结构和逻辑都有一个认识。

难点：分页（后端）模糊查询（后端）

DAY01需求：

    A 搭建项目环境

        1 使用express搭建项目环境

            express smms -e

        2 进入项目根目录 一次性安装所有依赖

            cnpm i

        3 监听端口 启动服务器

            a) 打开app.js文件  

                app.listen(666, () => {

                    console.log('服务器启动成功...端口：666')

                })

            b） 启动服务器

                nodemon app

    B 前端资源文件都放入public， 集成elementui和vue.js

        1 搭建前端目录结构,准备资源文件

            images: 图片

            js： 脚本

            styles： 样式

            libs：第三方库

                elementui:

                    css: 样式文件

                    fonts: 字体文件（css需要引用它,注意路径！）

                    js:  js脚本（依赖vue.js）

                vue:  vue.min.js

                jquery: jquery.min.js

        2 新建一个测试页面 测试环境是否搭建成功

注意：主要测试elementui是否可以使用。

    C 登录页面的布局实现

        1 登录页面表单

        2 水平和垂直居中

            1） 子绝父相

            2） left right top bottom  都设置为0

            3） margin： auto

    D 表单的基本验证：

        1 data里面有两份数据

            1） 双向数据绑定 主要用来取值

                loginForm: {  

                    username: '',  // 用户名

                    password: '',  // 密码

                    confirmPassword: '' // 确认密码

                }

            2） 验证规则的数据

                  rules: {

                        // 验证用户名

                        username: [

                            {required: true, message: '请输入用户名', trigger: 'blur'}, // 非空验证

                            {min: 5, max: 12, message: '用户名长度在 5 到 12 个字符', trigger: 'blur'} // 长度验证

                        ],

                        // 验证密码

                        password: [

                            {required: true, message: '请输入密码', trigger: 'blur'}, // 非空验证

                            {min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur'} // 长度验证

                        ],

                        // 验证确认密码 (自定义验证规则)

                        confirmPassword: [

                            { validator: checkPass, trigger: 'blur' }  // 自定义验证函数

                        ],

                    }

说明：

在return之前 自己写的验证函数

                    let 验证函数的名字 = (rules, value, callback) => {

                        // 对value判断

                        if (value === '') {

                            // 给出提示信息 输入框边框变红色 有一个 x

                            callback(new Error('不能为空'))

                        } else if (value.length < 6 || value.length > 18) {

                             // 给出提示信息 输入框边框变红色 有一个 x

                            callback(new Error('长度必须在6 - 18 位之间'))

                        } else {

                            // 成功 输入框边框变绿色 有一个√

                            callback()

                        }

                    }

                    rules: {

要验证的字段: [

                            {required: true, message: '提示信息', trigger: '触发方式'},   // 非空验证

                            {min: 5, max: 12, message:'提示信息', trigger: '触发方式'},   // 长度验证

                            {validator: 自己写的验证函数的名字, trigger: '触发方式'}

                        ]

                    }

        2 提交表单方法

            submitForm(formName) {

                // $refs能够把用 ref属性声明的dom 都收集在一个对象里面

                this.$refs[formName].validate((valid) => {

                    // 如果valid是true 证明整个表单前端验证全部通过 允许发送给后端了

                    if (valid) {

                        // 收集用户输入的用户名和密码

                        let username = this.loginForm.username;

                        let password = this.loginForm.password;

                        // 构造ajax 把用户名和密码发送给后端（等待 后端去数据库查询存不存在）

                    } else {

                        // valid是false 证明前端验证没有通过 不允许提交表单 不允许发给后端

                        console.log('error submit')

                        return false;

                    }

                })

            }

        3 重置表单：

            resetForm(formName) {

                // 获取整个表单 调用重置方法

                this.$refs[formName].resetFields();  // this.$refs[formName] ==> this.$refs.loginForm

            }

    E 后台首页页面的实现

    D 添加账号页面的实现

    F 用户列表页面的实现

DAY02:需求

准备工作：

        1 数据库设计：

数据库名字：admin

表的名字：users

创建用户账号表：

                create table `users` (

                    id int primary key auto_increment,

                    username varchar(50),

                    password varchar(32),

                    groups varchar(50),

                    ctime TIMESTAMP  default CURRENT_TIMESTAMP

                );

        2 nodejs连接mysql数据库?

            1）下载mysql模块

                cnpm i mysql --save

            2) 引入mysql模块

                const mysql = require('mysql');

            3) 创建连接

                const connection = mysql.createConnection({

                    host     : 'localhost',  // 主机名

                    user     : 'root',   // 用户名

                    password : 'root', // 密码

                    database : 'admin'  // 数据库的名字

                })

            4) 调用连接方法

                connection.connect();

        3 nodejs操作数据库

            a) 定义sql语句

                const sqlStr = 'sql语句';

            b) 执行数据库操作

                connection.query(sqlStr, (err, data) => {

                    if (err) {

                        throw err

                    } else {

                        // 根据data的各种情况判断

                    }

                })

    A 创建git共享仓库

    B  公共导航的抽取

        iframe 标签

        <iframe name="iframe的名称" src="引入的需要在这个标签里面显示的页面url" width="宽度" height="高度">

            // src引入的页面  会在这里显示

        </iframe>

    C) 添加账号功能实现 (***)

        1 前端-填写表单，点击添加按钮 发送ajax给后端（把用户账号的数据发送给后端）

            a) 用户填写表单 通过所有的前端验证 收集表单的数据（双向绑定）

            b) 把这些数据 通过ajax的post方式，发送给后端

        2 后端-接收请求，接收数据

            a) get方式使用 req.query  post方式使用req.body

        3 后端-把数据的数据 存入数据库

            a) 构造sql语句（插入数据的sql）

                const sqlStr "sql的增删改查的语法"

            b) 执行sql语句  

                connection.query(sqlStr, (err, data) => {   })

        4 后端-根据存入数据库的结果 返回给前端一些信息

成功：res.send({"errcode":1, "msg":"添加成功"})

失败：res.send({"errcode":0, "msg":"添加失败"})

        5 前端-根据后端返回的信息 判断

成功：》》弹出添加成功》》跳转到账号列表

失败：弹出添加失败，呵呵！

    D) 用户列表功能的实现 (***)

        1 前端-在生命周期 created 里面 发送ajax 去请求所有用户列表的数据

        2 后端-接收这个请求

        3 后端-构造sql语句 去数据库查询所有数据

        4 后端-根据查询结果判断

如果有错抛出错误

否则直接把查询的所有数据响应给前端

        5 前端-接收到后端返回的所有数据，赋值给tableData, 触发页面表格渲染

            a）注意： 需要保留this的指向  ajax里面的this不指向vue实例了。

    E) 用户删除功能的实现（***）

        1 前端-点击删除按钮 触发一个函数 把 id 传入

        2 前端-在这个函数里面 发送一个删除的请求 把 id 传给后端

        3 后端-接收这个请求，接收id

        4 后端-构造sql，以id为条件 执行删除

            a）const sqlStr = 'delete from users where id=10'

        5 后端-执行sql语句（单条删除操作）  

            a）如果有错 抛出错误

            b）如果没有错 根据结果判断

                i) 如果受影响的行数 > 0, 返回给前端一些信息（删除成功的信息）

                    res.send({"errcode":1, "msg":"删除成功！"})

                ii) 否则 返回给前端一些信息（删除失败的信息）

                    res.send({"errcode":0, "msg":"删除失败！"})

        6 前端-接收后端返回的数据，判断

            a) 如果成功  》》弹 出删除成功  》》刷 新页面

            b) 如果失败  弹出删除失败

DAY03:需求

    A 修改功能的实现

准备: 先写一个修改页面

        1 把原来的这一条数据回显出来

            1） 前端-点击修改按钮 触发一个函数 传入id

            2） 前端-在这个函数里面，直接跳转到修改页面，把id传过去

            3） 前端-在修改页面的生命周期 created里面, 获取id， 里面发送ajax，把这个id发送给后端

            4） 后端-接收请求，接收id

            5） 后端-根据id构造sql，去数据库把这条数据查询出来

                a）如果有错 抛出错误

                b）否则 直接把根据id查询出来的这一条数据（也就是要修改的数据）发送给前端

            6） 前端-接收数据，一一对应的，回填在修改页面的表单里面。

        2 把修改后的新数据，保存回去（根据原来的id）

            1） 前端-点击修改按钮，触发 submitForm

            2） 前端-如果前端所有验证通过，收集用户填写的新数据 和 一个原来的id

            3） 前端-发送ajax请求，这这些新数据 和 一个原来的id 一起发送给后端

            4） 后端-接收前端发送的修改后的新数据 和 一个原来的id

            5） 后端-以id为条件 构造sql语句（修改操作）

                a） update users set 字段名1=新的值1, 字段名2=新的值2 where id = 接收到的id

            6） 后端-执行修改的sql语句，根据修改的结果 判断 返回给前端一些信息

                a）如果有错 抛出错误

                b）如果没有错 根据修改的结果数据判断

如果成功：返回成功的数据对象给前端

如果失败：返回失败的数据对象给前端

            7） 前端-接收后端返回的信息 判断

                a）成功： 》》弹 出对应的提示信息 》》跳 转到用户列表页面

                b）失败： 弹出对应的提示信息

    B 批量删除的实现

        1 前端-给取消选中绑定事件 在事件里面实现取消选择

        2 前端-给整个table绑定选中就会改变的selection-change事件类型，

触发一个函数handleSelectionChange,自定把选中的数据传入函数里面

        3 前端-在这个函数里面，接收到这个值，把他赋值给一个属性（vue实例）

             this.multipleSelection = val;

        4 前端-给批量删除上绑定事件，在事件里面，获取 this.multipleSelection（里面保存了被勾选的数据）

        5 前端-遍历数据  this.multipleSelection 把里面的id 获取出来，放入一个数组 （被选中的数据的id）

        6 前端-构造ajax 把这些被选中的id们（数组）发送给后端

        7 后端-接收请求 接收这个包含id们 的数组

        8 后端-构造sql语句（in 子句），执行sql语句删除

            1） 如果有错 抛出错误

            2）否则 根据删除的结果数据 data 判断

                a） 如果 成功（受影响行数 > 0） 返回成功的数据对象给前端

                b） 否则 返回失败的数据对象给前端

        9 前端-接收后端响应回来的数据  判断

            1）如果成功 》》弹 出对应的提示信息   》》刷 新页面

            2）如果失败 弹出对应的提示信息

    C 登录功能实现

        1 检查用户身份（用户名和密码是否正确，是否在数据库里面存在）

            1）前端-前端验证通过，发送ajax请求给后端，把用户名和密码发送给后端

            2）后端-接收请求，接收用户名和密码

            3）后端-以用户名和密码 且 的关系，构造sql语句 执行sql语句查询数据库，判断

                a）如果有错 抛出错误

                b）否则 看数据是否存在 判断

如果存在返回成功（存在）的数据对象

否则返回失败（不存在）的数据对象

            4）前端-根据后端响应的数据，判断

                a）如果存在 》》弹 登录成功 》》跳 转到后台系统首页

                b）如果不存在 弹 出请检查用户名或密码

        2 检查用户是否已经登录（cookie）

            cookie： 储存在用户本地终端（浏览器）上的数据

说明：就是由服务器端（后端）创建存储在浏览器（客户端、前端）上的一种追踪用户的技术。

                nodejs操作cookie

增：设置：res.cookie(key, value);  // res.cookie('username', 'admin')

删：清除cookie： res.clearCookie(key) // res.clearCookie('username')

改：修改cookie： res.cookie(key, newValue) // res.cookie('username', 'guest');

查：获取cookie： req.cookies.key  // req.cookies.username;

具体步骤：

                1）后端-如果登录成功 设置cookie （在登录成功的路由里面设置）

                2）前端-每一个页面 都发送一个请求 （为了检测cookie是否存在）

                    <script src="/users/checkIsLogin"></script>

                3）后端-接收这个请求 获取cookie（从浏览器），检测是否存在

如果存在不作出任何操作(需要返回一些信息)

如果不存在返回弹窗请登录以后再操作跳转到登录页面

        3 退出登录功能

            1） 前端-点击退出系统，通过a标签发送一个get方式的请求

            2） 后端-接收请求，清除cookie, 弹出对应提示, 跳转到登录页面

DAY04需求：

    A 修改密码功能实现

        1 验证旧密码

            1）前端-写一个修改密码页面，实现前端的表单验证

            2）前端-自定义旧密码的验证规则（旧密码正不正确 前端是不知道的 需要发送ajax去验证）

            3）前端-在自定义的函数里面 直接发送ajax 把输入的旧密码的值 发送给后端

            4）后端-接收旧密码，从cookies获取当前登录用户的id。

            5）后端-根据id为条件，把当前用户数据查询出来，用查询出来的密码 和 接收到的旧密码比较

                a）如果有错 抛出错误

                b） 否则 判断

如果成功：返回成功的数据对象给前端

如果失败：返回失败的数据对象给前端

            6）前端-根据后端响应结果判断

如果错误

使用callback(new Error('错误信息'))

如果正确

                    callback()

        2 保存新密码（执行修改）

            1) 前端-点击保存按钮 发送ajax 把新密码发送给后端

            2）后端-接收新密码 从cookie获取 id

            3）后端-以id为条件 构造sql语句（修改密码）

            4）后端-执行sql语句，根据结果判断

如果成功：

清除cookie

返回成功的数据对象给前端

            5）前端-根据后端响应的数据，判断

如果成功：》》填充修改密码成功》》跳转到登录页面

    B 分页功能实现

分页思路分析：（后端分页）

后端分页需要什么条件呢？

                1) 每页显示多少条 pageSize ？ 从前端传过来，用户选择了以后就传过来

                2）当前在第几页呢 currentPage ？ 从前端传过来  用户点了哪个页码 就传给后端

                3）后端查询所有数据 计算数据的总条数 发送给前端

                4) 把当前用户想要的 对应页面的 数据 查询出来 发送给前端

                    sql查询条件：

                    n = (currentPage - 1)*pageSize

                    select * from users limit(n, pageSize)

结论：(*****)

前端需要给后台发送什么？

                    a） 页面尺寸pageSize

                    b） 当前页面 currentPage

后端需要给前端返回什么？

                    a）数据总条数据 （前端需要用来计算页码有多少）

                    b）对应页面的数据（点击第1页 就只返回第 1 页的数据 ）

工作中：（常见分页）

前端：只需要给后端发送当前页码

后端：自己构造sql 把对应当前页码的数据返回。

分页步骤：

            1 前端-使用分页组件 在对应的位置写上（账号列表页面）

            2 前端-获取需要发送给后端的参数： pageSize(页面尺寸)  currentPage(当前页)

            3 前端-改造页面里面请求数据的函数 getAllUsers

需要把前端的参数传入这个函数一起发送给后端(改成按照分页请求数据 而不是一次请求所有数据)

            4 后端-接收请请求，接收参数 pageSize 和 currentPage

            5 后端-构造sql 查询全局数据，计算出数据总条数

                    const sqlStr = 'select * from users';

                    connection.query(sqlStr, (err, data) => {

                        if (err) {

                            throw err

                        } else {

                           // 计算数据总条数

                           let  totalcount = data.length;

                        }

                    })

            6 后端-构造sql 排序然后 按照分页的条件查询 查询出对应页码的数据

                let n = (currentPage - 1)*pageSize

                sqlStr += ` order by ctime desc limit ${n}, ${pageSize}`

                connection.query(sqlStr, (err, data) => {

                    if (err) {

                        throw err

                    } else {

                        // 按照分页查询的数据的结果（前端传过来哪一页就是对应页码的数据）

                        let pageData = data;

                        // 把数据总条数 和 对应页码的数据 一起发送给前端

                        res.send({"totalcount": totalcount, "pageData": pageData})

                    }

                })

            7 前端-接收数据（数据是一个对象： {"totalcount":数据总条数, "pageData":对应当前页码的数据}）

把数据赋值给data里面 对应的字段

DAY05需求：

    A 分页功能完善

    B 登录显示当前登录用户功能完善

    C 商品列表模块商品添加实现

    D 商品管理模块实现

    E 高级查询

        1 前端-点击查询按钮，触发一个函数， 在这个函数里面，

收集查询的两个参数(分类名称 和 关键字（商品名称 或 条形码）) 发送给后端

        2 前端-发送ajax 把 分类名称 和 关键字 发送给后端

        3 后端-接收请求，接收参数（分类名称 和 关键字）

        4 后端-根据参数 构造sql语句 按照条件查询 ？ 怎么写sql？ (****)

        5 后端-执行sql，把查询的结果返回给前端

        6 前端接收返回结果 赋值给 tableData, 渲染表格