客户管理系统192.168.1.1（后台管理系统（第一天））

1
    
    
    
、后台管理系统项目简介 什么是后台管理系统项目？

在前端领域当中
    
    
    
，开发后台管理系统项目     


     


     


  ，并非是Java 




 




 




 
，PHP等后台语言项目在前面课程当中

   

   

   

，我们已经开发了一个项目【尚品汇电商平台项目】     

     

     

 ，这个项目主要针对的是用户（游客）  




  




  




  ，可以让用户在平台当中购买产品    
    
    
  。

但是你需要想明白一件事情


  


  


  


，用户购买产品信息从何而来呀？比如：前台项目当中的数据来源于卖家（公司）     
     
     
，但是需要注意的时候   




   




   




   ，卖家它不会数据库操作 


     


     


     
。对于卖家而言



 



 



 


，需要把产品的信息上传于服务器               ，写入数据库

 




 




 




。

卖家并非程序员    




    




    




   ，不会数据库操作（增删改查）   

   

   

 。导致卖家

















，找了一个程序员               ，开发一个产品     



     



     



   ，可以让我进行可视化操作数据库（增删改查）

卖家（公司）组成：老板     


     


     


  、员工  

     

     

     。

老板：开发这个项目
















，对于老板而言
    
    
    
，什么都可以操作


  




  




  




。【产品的上架 




 




 




 
、产品的下架

   

   

   

、查看员工的个人业绩     

     

     

 、其他等等】

员工：可能就是查看个人业绩

2  




  




  




  、后台管理系统

：可以让用户通过一个可视化工具     


     


     


  ，可以实现对于数据库进行增删改查的操作  


  


  


。

而且需要注意 




 




 




 
，根据不同的角色（老板


  


  


  


、员工）

   

   

   

，看到的     
     
     
、操作内容是不同的   
     
     
     。

对于后台管理系统项目     

     

     

 ，一般而言  




  




  




  ，是不需要注册的



   




   




   



。

模板介绍

简洁版: https://github.com/PanJiaChen/vue-admin-template （推荐）

加强版: https://github.com/PanJiaChen/vue-element-admin

1   




   




   




   、解压后发现文件夹里没有node_modules文件夹


  


  


  


，我们需要安装依赖npm install

2



 



 



 


、在vue.config.js配置文件中添加配置lintOnSave:false

1

2

3

module.exports = {

lintOnSave: false, // eslint-loader 是否在保存的时候检查

}

然后我们运行一下---->去看他的package.json文件下"dev": "vue-cli-service serve",说明我们用dev来运行npm run dev

文件介绍

build ----index.js webpack配置文件【很少修改这个文件】 mock ----mock数据的文件夹【模拟一些假的数据mockjs实现的】     
     
     
，因为咱们实际开发的时候   




   




   




   ，利用的是真是接口 node_modules ------项目依赖的模块 public ------ico图标,静态页面



 



 



 


，publick文件夹里面经常放置一些静态资源               ，而且在项目打包的时候webpack不会编译这个文件夹    




    




    




   ，原封不动的打包到dist文件夹里面 src -----程序员源代码的地方 ------api文件夹:涉及请求相关的 ------assets文件夹：里面放置一些静态资源（一般共享的）

















，放在aseets文件夹里面静态资源               ，在webpack打包的时候     



     



     



   ，会进行编译 ------components文件夹：一般放置非路由组件获取全局组件 ------icons这个文件夹的里面放置了一些svg矢量图 ------layout文件夹：他里面放置一些组件与混入 ------router文件夹：与路由相关的 -----store文件夹：一定是与vuex先关的 -----style文件夹：与样式先关的 ------utils文件夹：request.js是axios二次封装文件**** ------views文件夹：里面放置的是路由组件 App.vue:根组件 main.js：入口文件 permission.js:与导航守卫先关               、 settings：项目配置项文件 .env.development：开发环境的配置文件 .env.producation：生产环境的配置文件

后台管理系统API接口在线文档

最新后台文档swagger地址:

http://39.98.123.211:8510/swagger-ui.html#/

完成登录业务

静态组件完成

书写API（换成真实的接口）

axios二次封装

换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)

完成静态组件

修改里面的样式以及内容

这里修改了背景图片
















，以及把英文的都换成了中文

 把背景图片大小设置为100% 100%

.login-container { min-height: 100%; width: 100%; overflow: hidden; background: url(~@/assets/1.png); background-size: 100% 100%;

书写API（换成真实的接口）

这里之前登录的使用模拟的数据（mock）
    
    
    
，我们换成真实的接口

Swagger UI这里找接口

axios二次封装修改

import request from @/utils/request export function login(data) { return request({ url: /admin/acl/index/login, method: post, data }) } export function getInfo(token) { return request({ url: /admin/acl/index/info, method: get, params: { token } }) } export function logout() { return request({ url: /admin/acl/index/logout, method: post }) }

解决代理跨域问题 

devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { "/dev-api": { target: "http://gmall-h5-api.atguigu.cn/", pathRewrite: { "^/dev-api": "" } } } },

完成退出登录业务

英文改成中文

 路由的搭建

// src/router/index.js { // 一级路由 path:/product, component:Layout, // 在Layout的骨架下！！ name:Product, meta:{title:商品管理,icon:el-icon-goods}, // // title是设置侧边栏的文字 children:[ // 二级路由 { path:trademark, name:TradeMark, component:()=>import(@/views/product/tradeMark), meta:{title:品牌管理}, }, { path:attr, name:Attr, component:()=>import(@/views/product/Attr), meta:{title:平台属性管理}, }, { path:spu, name:Spu, component:()=>import(@/views/product/Spu), meta:{title:Spu管理}, }, { path:sku, name:Sku, component:()=>import(@/views/product/Sku), meta:{title:Sku管理}, }, ], },

 路由的呈现

 完成品牌管理业务tradeMark

 由于后端将图片路径改变了     


     


     


  ，所以图片显示不出来

首先完成品牌管理业务之前 




 




 




 
，需要完成静态组件

1    




    




    




   、添加button按钮

​ <!-- 按钮 --> <el-button type="primary" icon="el-icon-plus" style="margin:10px 0">添加</el-button> ​

2

















、表格（按列排布）

<!-- 表格组件 --> <el-table border> <el-table-column label="序号" width="80" align="center"></el-table-column> <el-table-column label="品牌类型" align="center"></el-table-column> <el-table-column label="品牌LOGO" align="center"></el-table-column> <el-table-column label="操作" align="center"></el-table-column> </el-table>

总共有四列

   

   

   

，每列代表不同的意思

3               、分页器

<!-- 分页器 --> <!--@size-change="handleSizeChange" @current-change="handleCurrentChange" --> <el-pagination :current-page="6" :page-sizes="[3, 5, 10]" :page-size="3" layout=" prev, pager, next, jumper,->,sizes, total" :total="90" style="margin-top:20px;text-align:center" > </el-pagination>

书写相关API接口 

// src/api/product/tradeMark.js // 品牌管理的相关接口 // 我们发请求需要用的是封装好的axios import request from @/utils/request // 获取品牌分页列表数据 dev-api/admin/product/baseTrademark/{page}/{limit} GET export const reqTradeMarkList = (page, limit) => { return request({ url: `dev-list/admin/product/baseTrademark/${page}/${limit}`, method: GET }) }

 接口统一暴露

import * as trademark from ./product/tradeMark import * as attr from ./product/attr import * as sku from ./product/sku import * as spu from ./product/spu //对外暴露 export default { trademark, attr, sku, spu }

 放在Vue的原型对象中     

     

     

 ，使得可以任意使用这个接口函数

// src/main.js // 引入相关API请求接口---挂载在原型上 import API from @/api/index // 组件实例的原型的原型指向的是Vue.prototype // 任意组件可以使用API相关的接口 Vue.prototype.$API = API;

 发送请求  




  




  




  ，获取到相应的数据

mounted() { this.getPageList(); }, methods: { async getPageList(pager = 1) { this.page = pager; const { page, limit } = this; let result = await this.$API.trademark.reqTradeMarkList(page, limit); console.log(result); if (result.code == 200) { this.total = result.data.total; this.list = result.data.records; } }, }

第一列 我们要展示的是序列号


  


  


  


，可以用 type="index"表示从1 开始展示索引号

第二列 我们展示的是品牌类型     
     
     
，在list 里面的tmName   




   




   




   ，我们可以用prop:对应列内容的字段名

第三列 展示的是品牌logo



 



 



 


，是个图片               ，我们有地址    




    




    




   ，我们可以用【作用域插槽】来展示图片

​ slot-scope="{ row, $index }"代表的是子组件回传过来的数据

















，也就是list

​ 然后我们进行动态展示图片:src

 第四列 有两个按钮

<el-table style="width: 100%" border :data="list"> <el-table-column type="index" label="序号" width="80px" align="center" ></el-table-column> <el-table-column prop="tmName" label="品牌名称" width="width" ></el-table-column> <el-table-column prop="logoUrl" label="品牌LOGO" width="width"> <template slot-scope="{ row, $index }"> <img src="row.logoUrl" alt="" style="width: 100px; height: 100px" /> </template> </el-table-column> <el-table-column prop="prop" label="操作" width="width"> <template slot-scope="{ row, $index }"> <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark" >修改</el-button > <el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button > </template> </el-table-column> </el-table>

分页器 

<el-pagination :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" layout=" prev, pager, next, jumper,->,sizes, total" :total="total" style="margin-top: 20px; text-align: center" :page-count="7" > </el-pagination>

 完成相关点击事件

// 点击页码进行切换 handleCurrentChange(pager) { // pager你点击的页数 // 修改参数               ，然后再发请求 this.page = pager ; this.getPageList(); },