1.K15项目案例-登录功能

步骤1: 添加axios库

npm install axios

步骤2: 在main.js导入

import axios from  'axios'  //导入本地库中的 axios.js

步骤3:Login.vue单文件组件 使用axios发送post登录请求

可以先安装一个qs库 npm i qs

 使用qs库将请求的json对象转换为 url字符串 ------------------------------------------------------------- //登录请求 onSubmit(){     this.$refs['loginForm'].validate((valid) => {         if (valid) {             //发送axios请求             // axios.post("/api/login","username="+this.user.username+             //             "&password="+this.user.password)             let reqUrl = this.$qs.stringify(this.user);//将请求的对象参数转换为url字符串             //console.log(reqUrl);  //测试输出             this.$axios.post("/api/login",reqUrl).then(res=>{                 console.log(res.data);                 if(res.data.status===200){                     //添加消息提示

                     //将收到strToken存入到localStorage                     window.localStorage.setItem("strToken",res.data.data);

                     //进入后台首页                     this.$router.push("/home");                 }else{                     //弹出消息

                 }             });                                         } else {             return false;         }     }); }     

步骤4: 解决跨域问题axios请求

vue-cli 解决开发过程中的跨域问题是利用到了 webpack 在开发环境中所提供的代理服务器(http-proxy-middleware)。之所以能通过代理服务器解决跨域问题是因为代理服务器(http-proxy-middleware)它不是浏览器，它没有同源安全检测

在vue.config.js添加配置

module.exports = {    devServer: {      port: 9000,  //vue项目访问端口      proxy: {  //配置代理服务器,解决跨域请求问题        "/api": { // 1          target: 'http://127.0.0.1:8080',   // 2          changeOrigin: true, // 3          pathRewrite: {            '^/api': '/' // 4          }        }      }    } }

注:配置后要重启vue项目

步骤5:解决统一引用axios和qs的问题

为了避免在每次使用axios时都需要import导入，将main.js中添加全局属性名

main.js文件:

import axios from  'axios'  //导入本地库中的 axios.jsimport qs from 'qs'  //导入本地库的     qs.js

//配置一个全局属性Vue.prototype.$axios=axiosVue.prototype.$qs=qs

然后在其他组件文件中使用this.$axios

 this.$axios.post("/api/login",reqUrl).then(res=>{}).catch();

步骤6:添加消息提示

 if(res.data.status===200){     //添加消息提示     this.$message({         showClose: true,         message: '欢迎您，'+this.user.username,         type: 'success',         offset:300,         duration:1000  //显示的时间,ms     });

     //将收到strToken存入到localStorage     window.localStorage.setItem("strToken",res.data.data);

     //进入后台首页     this.$router.push("/home"); }else{     //弹出消息     this.$message({         showClose: true,         message: res.data.msg,         type: 'error',  //消息框类型         offset:550,  //距离顶端偏移量         duration:1000  //显示的时间,ms     }); }

2.K15项目案例-后台首页-1

步骤1:在Home.vue组件中添加布局容器

步骤2:添加css的lang="less"，需要添加less-loader库文件

npm i less-loader@5.0.0 less@3.9.0 -D

步骤3:编写首页相关布局代码

<template>    <el-container>        <el-header>            <el-row>                <el-col :span="8" class="col_l"><img src="../../assets/logo.jpg"/></el-col>                <el-col :span="8"><h1>WoniuK15教育-后台管理系统</h1></el-col>                <el-col :span="8" class="col_r">                    <span style="color:#fff;">您好，{{username}}</span>&nbsp;&nbsp;                    <el-button type="danger" size="small" @click="logout()">退出</el-button>                </el-col>            </el-row>        </el-header>        <el-container>            <el-aside width="200px">Aside</el-aside>            <el-main>Main</el-main>        </el-container>    </el-container></template>

<script>export default {  name: 'Home',  data(){    return {        username:''    }  },  components: {

  }}</script>

<style lang="less" scoped>.el-container {  height: 100%;}.el-header {  background: #632c90;  padding:0;  h1 {    color: #fff;    text-align: center;    line-height: 60px;    font-size: 26px;  }  .col_r {    line-height: 60px;    text-align: right;    padding-right: 30px;    a {      color: #daa520;    }  }  .col_l {    text-align: left;  }}.el-aside {  background: #545c64;}

.el-main {  background: #eaeef1;}</style>

步骤4: 完成登录后显示用户名

Login.vue登录成功后，将登录的用户存入sessionStorage

 this.$axios.post("/api/login",reqUrl).then(res=>{                        console.log(res.data);     if(res.data.status===200){         //添加消息提示         this.$message({             showClose: true,             message: '欢迎您，'+this.user.username,             type: 'success',             offset:300,             duration:1000  //显示的时间,ms         });

         //将收到strToken存入到localStorage         window.localStorage.setItem("strToken",res.data.data);         window.sessionStorage.setItem("username",this.user.username);

         //进入后台首页         this.$router.push("/home");     }     ...

Home.vue钩子函数created()

<script>export default {  name: 'Home',  data(){    return {        username:''    }  },  created(){     this.username = window.sessionStorage.getItem("username");  }}</script>

步骤5: 实现退出功能

<el-col :span="8" class="col_r">    <span style="color:#fff;">您好，{{username}}</span>&nbsp;&nbsp;    <el-button type="danger" size="small" @click="logout()">退出</el-button></el-col>

 logout(){     this.$confirm('此操作将退出系统, 是否继续?', '提示', {         confirmButtonText: '确定',         cancelButtonText: '取消',         type: 'warning'     }).then(() => {         this.$message({             type: 'success',             message: '欢迎下次光临!',             offset:300,             duration:1000  //显示的时间,ms         });         //移除localStorage 里面的strToken         window.localStorage.removeItem("strToken");         window.sessionStorage.removeItem("username");         //路由到登录         this.$router.push('/login');     }).catch(()=>{}); }

3.K15项目案例-后台首页-2

(1) 添加导航菜单

<!-- el-menu 表示菜单default-active 默认激活 对应的是 el-menu-item 的index属性值el-submenu  子菜单el-menu-item 菜单项el-menu-item-group 菜单项分组active-text-color 激活颜色--><el-menu         default-active="0"         class="el-menu-vertical-demo"         background-color="#545c64"         text-color="#fff"         active-text-color="#ffd04b">    <el-menu-item index="0">        <i class="el-icon-s-home"></i>        <span slot="title">首页</span>    </el-menu-item>    <el-submenu index="1">        <template slot="title">            <i class="el-icon-star-on"></i>            <span>讲师管理</span>        </template>        <el-menu-item index="1-1">            <i class="el-icon-menu"></i>            <span slot="title">讲师列表</span>        </el-menu-item>    </el-submenu>    <el-submenu index="2">        <template slot="title">            <i class="el-icon-upload"></i>            <span>课程管理</span>        </template>        <el-menu-item index="2-1">            <i class="el-icon-collection-tag"></i>            <span slot="title">课程列表</span>        </el-menu-item>    </el-submenu>    <el-submenu index="3">        <template slot="title">            <i class="el-icon-user"></i>            <span>用户管理</span>        </template>        <el-menu-item index="3-1">            <i class="el-icon-s-promotion"></i>            <span slot="title">用户列表</span>        </el-menu-item>    </el-submenu>    <el-menu-item index="4">        <i class="el-icon-picture"></i>        <span slot="title">图形报表</span>    </el-menu-item></el-menu>

(2) 开启路由模式跳转

配置路由:

const router = new VueRouter({  routes:[    {path:'/',redirect:'/login'}, //路由重定向    {path:'/login',name:'Login',component:Login},    {        path:'/home',        name:'Home',        component:Home,        children:[ //嵌套路由            {                path:'/teacher',                name:'Teacher',                 component: () => import('../components/teacher/Teacher.vue') //不需要先导入,注册时导入            },            {                path:'/course',                name:'Course',                 component: () => import('../components/course/Course.vue') //不需要先导入,注册时导入            }        ]    }  ]})

Home.vue菜单更新:

<!-- el-menu 表示菜单default-active 默认激活 对应的是 el-menu-item 的index属性值el-submenu  子菜单el-menu-item 菜单项el-menu-item-group 菜单项分组active-text-color 激活颜色:router表示开启vue-router模式,导航时以 index 作为 path 进行路由跳转:default-active="$route.path"  //默认激活样式为当前路由的路径--><el-menu         :default-active="$route.path"          class="el-menu-vertical-demo"         background-color="#545c64"         text-color="#fff"         active-text-color="#ffd04b"         :router="true">

Menu标签上的属性

4.K15项目案例-后台讲师列表-1

(1) 添加Breadcrumb 面包屑导航

 <!-- 面包屑导航 --><el-breadcrumb separator="/">    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>    <el-breadcrumb-item><router-link to="/teacher">讲师管理</router-link></el-breadcrumb-item>    <el-breadcrumb-item>讲师列表</el-breadcrumb-item></el-breadcrumb>

(2) 添加搜索栏

<!-- 搜索栏 --><el-row style="margin-top:10px;">    <el-col :span="8">        <el-input v-model="searchName" placeholder="请输入内容">            <!-- 放大镜按钮 -->            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>        </el-input>    </el-col>    <el-col :span="8" style="margin-left:10px;"><el-button type="success">添加讲师</el-button></el-col>    <el-col :span="8"></el-col></el-row>

(3) 添加表格

<!-- 讲师列表的数据表格            :data动态绑定属性--数组            el-table-column 表列         --><el-table :data="tableData" style="width: 100%;margin-top:10px;">    <el-table-column                     prop="id"                     label="序号"                     width="80">    </el-table-column>    <el-table-column                     prop="name"                     label="姓名"                     width="180">    </el-table-column>    <el-table-column label="日期" width="180">        <!-- 插槽 scope.row表示当前表格行中的对象 -->        <template slot-scope="scope">            <i class="el-icon-time"></i>            <span style="margin-left: 10px">{{ scope.row.date }}</span>        </template>    </el-table-column>    <el-table-column label="操作">        <template slot-scope="scope">            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>        </template>    </el-table-column></el-table>

(4) 添加分页组件

 <!-- 分页组件background 是否显示背景色layout表示显示分页的布局组件 prev 上一页 next下一页 pager导航页码 sizes 每页记录数:total设置总记录数:page-size每页记录数:current-page当前页码--><el-pagination               :background='true'               layout="prev, pager, next,sizes,jumper,->,total"               prev-text='上一页'               next-text='下一页'               :page-sizes='[5,10,15,20,25,30,35,40,45,50]'               :page-size=5                :current-page="1"                :total="100"></el-pagination>

5.K15项目案例-后台讲师列表-2

查询讲师列表

@GetMapping("/teacher/list")public ResponseResult<PageInfo> getTeacherList(    @RequestParam(name = "pageNum",defaultValue = "1") Integer pageNum,    @RequestParam(name = "pageSize",defaultValue = "5") Integer pageSize,    @RequestParam(name = "searchName") String name) {    PageHelper.startPage(pageNum,pageSize);    QueryWrapper<Teacher> wrapper = new QueryWrapper<>();    if(!StringUtils.isEmpty(name)){        wrapper.like("name",name);    };    List<Teacher> teacherList = teacherService.list(wrapper);    PageInfo<Teacher> pageInfo = new PageInfo<>(teacherList);    return new ResponseResult<>(pageInfo,"OK",200);}

查询科目列表

@RestControllerpublic class SubjectController {    @Autowired    private SubjectService subjectService;

    @RequestMapping("/subject/list")    public ResponseResult<List<Subject>> getSubjectList(){        return new ResponseResult<>(subjectService.list(),"OK",200);    }}

讲师列表模块页面:

<!-- 讲师列表的数据表格            :data动态绑定属性--数组            el-table-column 表列         --><el-table :data="teacherData" style="width: 100%;margin-top:10px;">    <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>    <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>    <el-table-column prop="education" label="毕业院校" width="140"></el-table-column>    <el-table-column prop="career" label="教育经历" width="140" align="center"></el-table-column>    <el-table-column label="是否名师" width="120" align="center">        <template slot-scope="scope">            <el-tag :type="scope.row.isfamous=='y' ? 'success' :'danger'">                {{scope.row.isfamous=='y' ? '是' :'否'}}            </el-tag>        </template>    </el-table-column>    <el-table-column label="任课科目" width="180" align="center">        <template slot-scope="scope">            <span v-for="subject in subjectData" :key="subject.id">                <span v-if="subject.id===scope.row.subjectid">{{subject.name}}</span>            </span>        </template>    </el-table-column>    <el-table-column label="入职日期" width="140" align="center">        <!-- 插槽 scope.row表示当前表格行中的对象 -->        <template slot-scope="scope">            <i class="el-icon-time"></i>            <span style="margin-left: 10px">{{ scope.row.hiredate }}</span>        </template>    </el-table-column>    <el-table-column  label="在职状态" width="120" align="center">        <template slot-scope="scope">            <el-tag :type="scope.row.status=='y' ? 'success' :'danger'">                <span>{{scope.row.status=='y' ? '在职' :'离职'}}</span>            </el-tag>        </template>    </el-table-column>    <el-table-column label="操作" align="center" width="180">        <template slot-scope="scope">            <el-button size="mini" type="primary"                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>            <el-button size="mini" type="danger"                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>        </template>    </el-table-column></el-table>

脚本:

 //获取讲师列表数据findTeacherList(){    this.$axios.get('/api/teacher/list?searchName='+this.searchName,                    {headers:{strToken:window.localStorage.getItem('strToken')}})        .then(res=>{        console.log(res.data);        let pageInfo = res.data.data;        this.teacherData=pageInfo.list;        //使用pageInfo.属性        this.currentPage=pageInfo.pageNum;    }).catch(e=>{        this.$message({            showClose: true,            message: '服务器跑不见了!',            type: 'error',            offset:550,            duration:1000  //显示的时间,ms        });    });},    //查询科目列表    findSubjectList(){        this.$axios.get('/api/subject/list',                        {headers:{strToken:window.localStorage.getItem('strToken')}})            .then(res=>{            console.log(res.data);            this.subjectData= res.data.data;        }).catch(e=>{            this.$message({                showClose: true,                message: '服务器跑不见了!',                type: 'error',                offset:550,                duration:1000  //显示的时间,ms            });        });    } },    created(){        //发送axio请求，获取讲师数据        this.findTeacherList();

        this.findSubjectList();    }

.jztagtree{max-height:85vh;right:0px}.jzDown{top:10vh}.jztagtree li a{background-color:#b2c4d1}.jztagtree li a:before{border-right:10px solid #b2c4d1}.jztagtree li a:hover{background:#0045a6}.jztagtree li a:hover::before{border-right:10px solid #0045a6}