vue教程4-vueadmin上手
项目地址
https://github.com/PanJiaChen/vue-admin-template
这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
- 在win环境下安装
- nodejs版本8.11.3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | # Clone project #生成vue-admin-template目录 git clone https: //github .com /PanJiaChen/vue-admin-template .git # Install dependencies #先进入vue-admin-template目录 #命令会生成node_modules目录,所有依赖都在其中 #如果安装失败,删除node_modules目录,重新安装依赖 npm install # Serve with hot reload at localhost:9528 npm run dev # Build for production with minification npm run build # Build for production and view the bundle analyzer report npm run build --report |
config/dev.env.js
1 2 3 4 5 6 7 8 9 10 11 | 'use strict' const merge = require( 'webpack-merge' ) const prodEnv = require( './prod.env' ) module.exports = merge(prodEnv, { NODE_ENV: '"development"' , BASE_API: '"http://127.0.0.1:8008/"' , }) #在config里有dev环境配置和prod环境配置 #将dev的BASE_API设定为后台的API地址,这样vue就能访问后端API数据了 #由于是跨域访问,所以在后台需要添加跨域访问的功能 |
src/api/mofang.js
1 2 3 4 5 6 7 8 9 10 11 12 | import request from '@/utils/request' export function getMofangMailList() { return request({ url: 'GameGroup/' , method: 'get' }) } #在src/api目录下建立mofang.js文件 #创建getMofangMailList方法 #url和config里的BASE_API拼接后就是API的请求地址 #使用get方法获取数据 |
router/index.js
1 2 3 4 5 6 7 8 9 10 11 | { path: '/mofang' , component: Layout, children: [{ path: '' , name: 'Gamegroup' , component: () => import ( '@/views/mofang/index' ), meta: { title: 'Gamegroup' , icon: 'example' } }] }, #添加一条路由信息 |
src/views/mofang/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <template> <div class= "dashboard-container" > <el-table :data= "tableData" border style= "width: 100%" > <el-table-column prop= "id" label= "编号" /> <el-table-column prop= "name" label= "名称" /> <el-table-column prop= "mail" label= "邮箱" /> < /el-table > < /div > < /template > <script> import { getMofangMailList } from '@/api/mofang' export default { data() { return { tableData: [] } }, created() { this.fetchData() }, methods: { fetchData() { getMofangMailList(). then (response => { this.tableData = response }) } } } < /script > <style rel= "stylesheet/scss" lang= "scss" scoped> .dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; } } < /style > #created()方法在dom的生命周期内执行,调用this.fetchData() #fetchData()中,执行getMofangMailList方法 #在api中,使用get方法向api地址请求数据并return #使用then方法,return的数据传参给response #把response 的数据赋值给this.tableData #this.tableData渲染到dom表单 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥