拿取gitee中现成的vue-manage-system模板


后台管理系统一般是直接拿现成的,我们后续可以基于这个模板进行开发也可在网络上搜索vue后台模板

1.解压vue-manage-system压缩包

2.将目录拖到vscode

package.json中是依赖

3.打开终端,输入安装依赖命令,自动扫描依赖自动安装

npm install或npm i

4.运行

npm run dev或npm run serve

node_modules:是安装完依赖自动产生的文件

table.json:是表格中的假数据

index.html:最终所有页面会挂载到这里

package-lock.json:安装完项目依赖的版本锁死

package.json:项目的简介,启动脚本,依赖配置

src目录

api:发送的一些请求进行封装 与后端对接的接口

assets:静态资源(背景图,logo图)

components:common共用组件,page:页面

router:路由,跳转规则

Utils下的request.js是进行axios的引用,响应拦截器

main.js:引入request

App.vue:路由,对应页面展示

简化引入的模板,留一些简单模块,其他删掉

Home.vue是一直不动的部分:侧边栏,顶部

使用的一个父类router-view在App.vue中

中间改变页面,每次点完侧边栏切换的页面是Home.vue中的子路由router-view

把router-index.js中的children属性下只保留两个侧边栏显示,去sidebar.vue中找到菜单中的子菜单,items中只保留系统首页和用户管理就行

现在想实现:点击用户管理能够跳转页面

首先打开router-index.vue

自定义一个路径需要我们在page页自己写用户管理页面代码

我们在page下面新建一个User.vue

1.生成vue模板

2.h1标签:用户管理

3.在elementUI中选择一个表格:固定列

4.复制el-table放在代码中

5.methods中的代码复制

6.tableData中的数据也复制

然后将我们Easy Mock中的假数据拿过来 修改数据,前端发送请求向后端Easy Mock中拿取模拟的数据

我们可以参考BaseTable中的基础表格是怎么做的

1.因为url统一都封装在了api里的index.js中

我们直接模仿里面的请求方法即可

方法名:getUserList,路径是easymock中我们自己创建的

我们不需要进行?拼参所以括号中不写内容

我们的路径是easy mock中的/getUser

baseurl:在utils中写完整的easy mock中的基础路径

在User.vue中引入刚刚配置好的路径

查看拦截器是否会拦截我们发送的请求,打开request.js

直接返回data,我们也不需要再写data ,模拟数据也是data

我们写完loadData后还需要在created中调用,提前创建好页面,this.loadData();




页面效果:

相关推荐
萝卜兔0084 小时前
PIKACHU_UnsafeFileUpload
javascript·php
Highcharts.js5 小时前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
IT_陈寒5 小时前
JavaScript实战技巧总结:深挖数组遍历的性能陷阱与实战解法
前端·人工智能·后端
步行cgn5 小时前
为什么既要 web.xml 又要 springmvc.xml?能不能只配一个?
xml·前端·hive
风骏时光牛马5 小时前
大模型综合能力评测:多维度性能与对齐效果对比
前端
winfredzhang5 小时前
从零手写一个毛玻璃风格的页面搭建台:单文件 HTML 实现组件放置、面板磁吸与图层管理
前端·html
葡萄城技术团队13 小时前
1000 人协同压测的环境瓶颈排查:CPU 争用与 Wi\-Fi
前端
Java后端的Ai之路14 小时前
CAS并发控制-从CPU指令到企业级乐观锁
vue.js·人工智能·python·cas·乐观锁
excel14 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
Da Da 泓15 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目