项目实战2

秒速五厘米 2024-03-27 11:21 52阅读 0赞

### **一、路由的配置和使用** ###

1.  路由的作用、URL地址和页面的适配

1.  安装命令

npm install vue-router@next --save

1.  新建相关页面

1.  src目录下新建路由文件routes.ts按右侧代码块写入页面和路由映射关系

1.  项目中导入

import router from './routes'

app.use(router)

安装路由成功

![dcc6063612c0e539ce7386fa066e5537.png][]

在src中新建routes文件并补充

![d1b2812d639782358cefa33218d310e0.png][]

需要在main里边使用

![7a6808b26fb7a4168921278f6fe77b45.png][]

### **二、创建后端项目** ###

选择webAPI

![b131d54efaac50458657671f732aa713.png][]

![4268a98060935d0e2c0263a30d711bc2.png][]

然后启动项目

![066a648541e66c25aece7ec3ba243312.png][]

表示创建成功

### **三、设计数据库** ###

认为需要四个表

登陆的账号密码我写到了用户表里面了 没有再重新弄一个表

#### **1、用户表** ####

字段如图

![15595dc723c83bdf9a1d92918e36c094.png][]

![694b116bb689a9f52759e193bb9b8d29.png][]

#### 2、角色表 ####

![676d392f78b8bc862fbd0e8c9bc05d30.png][]

![95378898a874699596ca2072a38d40e8.png][]

#### 3、菜单表 ####

![ceb2da129fc07b3ae966c3039ef5db30.png][]

![b644a959bb5c4631d3e697e69797c2e1.png][]

#### 4、角色菜单对应关系表 ####

![0e6526f4710c6f7bbaadcd566dce17e1.png][]

![39141656155a7984cee2cde494ac0d01.png][]

[dcc6063612c0e539ce7386fa066e5537.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/de1348a519e648ee9b509347858d0252.png
[d1b2812d639782358cefa33218d310e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/dd74669c44ee4f8f9f71d06c0b58d3fe.png
[7a6808b26fb7a4168921278f6fe77b45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b8379e3ca84945ce999cf69d27c9e97e.png
[b131d54efaac50458657671f732aa713.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b8951814aee440fe94af98e9c3e9a410.png
[4268a98060935d0e2c0263a30d711bc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f9177829b3b34434b0a6b5d0ef4320f6.png
[066a648541e66c25aece7ec3ba243312.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7bc267c52d9243c09a328f1eb90e20de.png
[15595dc723c83bdf9a1d92918e36c094.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b4841c71f5364422a1187f7fc47cb3fa.png
[694b116bb689a9f52759e193bb9b8d29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/73ce9b0132ab4ded8eb4a59a43097041.png
[676d392f78b8bc862fbd0e8c9bc05d30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6a1630202ec14ad3a18adde25033cd0c.png
[95378898a874699596ca2072a38d40e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/173679c14d1f45b4b9e5c3eade27a4c6.png
[ceb2da129fc07b3ae966c3039ef5db30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/df027bbd22c7439da2d83293bb9a0f55.png
[b644a959bb5c4631d3e697e69797c2e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9b07f1844d6c4505b3180b282846766a.png
[0e6526f4710c6f7bbaadcd566dce17e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d45e5692bba649f4ac04a4123f66766a.png
[39141656155a7984cee2cde494ac0d01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ae126935b9ad47f3ae1985577cd31037.png