riverflow
|
d82ab0f2ae
|
完成小程序端首页轮播图对接
|
6 months ago |
riverflow
|
a3c02ec4e0
|
完成广告管理模块接口
|
6 months ago |
riverflow
|
426c963380
|
完成菜品管理接口开发
|
6 months ago |
riverflow
|
4cfe26647c
|
完成菜品分类模块与后端接口的对接
|
6 months ago |
riverflow
|
c1dde1f636
|
在api/user/index.ts文件中配置删除接口delete请求
在views/user/Index.vue文件中,将getList()方法当作参数传递给useUser
给deleteBtn添加参数(scoped.row)
在compositions/user/useUser.ts文件中,
为deleteBtn添加后端接口对接
完成用户删除功能后端接口的对接
|
6 months ago |
riverflow
|
d472c8674b
|
新建utils文件夹,新建myConfirm.ts文件
从Element-plus中导入消息弹出框组件
新建type文件夹,新建baseType.ts文件
定义通用函数类型,新增和编辑的状态数字
在main.ts文件下从myConfirm.ts文件中引入消息弹出框组件,进行全局注册
在api/user/index.ts文件中配置编辑接口put请求
在views/user/AddUser.vue文件中
改写show函数,增加判断,
当row值不为空时,此时调用者为编辑按钮
添加回显数据功能
改写表单提交事件
通过type判断,使新增、编辑功能分别对应各自接口
完成用户编辑功能后端接口的对接
|
6 months ago |
riverflow
|
c97cd4c600
|
实现搜索按钮、重置按钮与后端接口的对接
|
6 months ago |
riverflow
|
e64a7740c9
|
在api/user/index.ts文件下添加列表查询增接口
在api/user/userModel.ts文件下为ListUserParm(列表查询)增加属性类型total,
用来记录分页总条数
在views/user/Index.vue文件下通过Element-plus创建用户列表、分页显示模块
在compositions/user/useUserTable.ts文件中调用getListApi,
实现与后端接口对接,并用tableList存储列表返回到用户列表
添加一系列用户列表、分页显示模块需要的属性及方法
在main.ts文件中全局配置Element-plus国际化,显示中文
|
6 months ago |
riverflow
|
c3039c19c8
|
在api/user/index.ts文件下配置新增用户业务的接口
在vite.config.ts文件下进行跨域配置,实现所有/api的路径都会被转接到后端
完善后端新增用户逻辑,当用户账户名和手机号重复时,返回错误提示
(经测试,由前端表单获取的数据能够传递给数据库,并且能实现重复报错逻辑)
|
6 months ago |
riverflow
|
efb5d3995d
|
在views/user下新建AddUser.vue模块,细分新增功能
完善新增按钮功能
通过按钮实现表单弹窗
根据Element-plus提供的表单组件,修改表单属性
根据数据库表中的字段,设置需要从表单中获取的信息
|
6 months ago |
riverflow
|
0ff2c7b98b
|
通过npm run build命令检查代码,修改部分欠缺(如,类型定义不明确等)
修改store/collapse/index.ts后发现,
Menu.vue,MenuLogo.vue,Collapse.vue三个文件对应功能出现bug
将这三个文件中的getCollapse方法直接改为collapse
(store/collapse/index.ts修改后collapse为ref值可直接获取)
创建api和compositions模块,抽离表格相关的业务
在api模块下定义列表查询数据类型
在compositions模块下传递参数,并将列表查询的方法返回出去(封装方法)
在views/user/Index.vue文件中从ELement-plus中导入el-main(主要区域容器)
导入useUserTable,获取表格相关业务
通过el-form搭建搜索栏
|
6 months ago |
riverflow
|
84055fe616
|
在components文件夹下新建SysDialog文件,从Element-plus中导入弹窗
在src中新建hooks模块,用于存储需要大量复用的代码
在hooks文件夹下新建useDialog.ts文件,用于定义dialog相关属性及方法
并通过返回值将属性及方法导出使用
在vite-env.d.ts文件中添加hooks的路径别名支持
在首页dashboard中添加一个测试弹窗用于测试上述封装是否成功
(测试成功)
|
6 months ago |
riverflow
|
58a9f8df63
|
在src文件夹下新建http模块,在index.ts文件中进行配置
安装axios库,在index.ts文件中进行axios请求配置,并配置拦截器
封装get,post,put,delete请求
|
6 months ago |
riverflow
|
3e678c1fb3
|
在layout.header文件夹中创建BreadCrumb.vue文件
通过Element-plus导入面包屑导航
在BreadCrumb.vue文件中引入当前路由,实现路由地址控制面包屑导航
使用watch监听路由path
当path发生变化时,调用getBrandCrumb函数
点击的第一条数据不是首页时,需要构造首页路径
在getBrandCrumb函数中添加if判断
onMounted函数实现当组件首次加载时,根据当前路由路径生成面包屑导航
|
6 months ago |
riverflow
|
43d29b8b66
|
在路由中为每个菜单选项添加title
|
6 months ago |
riverflow
|
05835142af
|
在资源文件夹中导入user.png图片,作为用户的头像
在LoginOut.vue文件中通过Elemnt-plus添加下拉菜单组件
将下拉菜单组件中多余部分注释掉
用用户头像替换掉下拉菜单提示文字
为其设置样式
|
6 months ago |
riverflow
|
c03731ff32
|
在MenuLogo.vue中解决当菜单栏收缩时,标题文字不收缩的问题
添加show变量,通过布尔值控制文字显示
通过watch监听show变量值的变化,实现延时函数,美化标题收缩效果
|
6 months ago |
riverflow
|
cb1da2faf6
|
在layout.Menu.vue文件中,为menu添加收缩属性collapse
属性值需要通过store.collapse获取
引入store.collapse,通过getCollapse获取状态属性值(true/false)
传递给collapse实现菜单的收缩
|
6 months ago |
riverflow
|
3e93e011b1
|
在store文件夹中,创建collapse文件夹,以及index.ts文件
配置index.ts文件,存储一个布尔值,用来控制图标变化
在vite-env.d.ts文件中配置store的导出
在layout.header/Collapse.vue中,添加动态组件
通过动态组件,实现图标点击事件
为图标添加点击事件,点击后store中存储的值取反,结合动态组件改变图标状态
ps:使用动态组件时,需要局部引入图标
|
6 months ago |
riverflow
|
0039a33026
|
在layout文件夹中创建header文件夹,用来存放header区域相关组件
在header文件夹中新建Header.vue、Collapse.vue、LoginOut.vue文件
分别对应头部整体区域、收缩按钮组件、退出登录组件
将Collapse.vue、LoginOut.vue引入Header.vue
为Header.vue配置样式
在layout.Index.vue主页引入Header.vue
对Index.vue中的header区域添加样式,分隔收缩图标和退出登录
|
6 months ago |
riverflow
|
c35f0cfdb4
|
在index.html文件中修改title为校园点餐系统
在路由router.index.ts中配置自动跳转到首页
通过redirect: '/dashboard'实现首页自动跳转
在views文件夹中创建首页文件夹dashboard以及Index.vue
修改菜单layout.Menu.vue,增加首页选项
|
6 months ago |
riverflow
|
6b88c8cf43
|
通过获取当前路由路径,传递给default-active
绑定active
实现路由路径对应选项获得active
|
6 months ago |
riverflow
|
43604adc9b
|
在Layout.Index.vue文件中,
修改main区域内容
通过router-view将路由跳转后的页面内容引入到main区域
(测试发现,点击不同选项后,main区域显示选项对应文字---测试通过)
|
6 months ago |
riverflow
|
30f74be127
|
为六个选项的Index.vue文件创建框架
在Menu.vue文件中,启用router属性
将每一个选项的index作为路由路径,实现path跳转
(测试发现,路径发生变化---测试通过)
|
6 months ago |
riverflow
|
1c92fe013c
|
在路由router文件夹下,为菜单栏中的六个选项分别配置路由
(涉及promise类型定义,在vite-env.d.ts文件中更新promise声明)
创建views文件夹,在该文件夹下分别创建六个选项对应的文件夹,用来管理各自页面
在六个选项对应的文件夹下分别创建Index.vue文件,实现选项首页框架
|
6 months ago |
riverflow
|
45852a18a8
|
index.ts文件中 name中home大小写错误,第32次提交之前为大写
|
6 months ago |
riverflow
|
7fafbc75e4
|
创建MenuLogo文件
存放项目logo和title
并为其设置样式
将MenuLogo文件引入到Menu中
将logo和title放置在menu菜单栏顶部
调整适应样式
|
6 months ago |
riverflow
|
07d3330a4f
|
为Menu.vue中菜单栏选项添加样式
增加选项鼠标悬停样式和被选中样式
在Index.vue中修改aside背景色和宽度
适应Menu菜单
|
6 months ago |
riverflow
|
74ee36fc8c
|
创建Menu.vue文件,通过Element-plus导入菜单框架,增删属性
局部引入菜单栏中所有选项的图标
将Menu.vue引入到Index.vue中
放在侧边栏aside中
注释掉侧边栏aside测试用背景色
|
6 months ago |
riverflow
|
813c207ecd
|
清空内外边距,完成主界面布局
|
6 months ago |
riverflow
|
9d3648437a
|
测试发现,虽然引入成功,但是高度属性存在问题
在index.html中为html,body,#app配置高度样式解决问题
(问题解决)
|
6 months ago |
riverflow
|
7f2b5780be
|
在Index.vue中给首页框架添加测试属性,
将index.ts中挂载的HelloWorld.vue切换至Index.vue,测试首页框架是否引入成功
(测试结果—修改成功)
|
6 months ago |
riverflow
|
f931698e05
|
创建layout文件夹,创建index.vue文件,通过Element-plus导入首页框架
|
6 months ago |
riverflow
|
a2a79573aa
|
修改逻辑,通过vue显式导入computed来获取store中count的值
|
6 months ago |
riverflow
|
ef83c1c796
|
给按钮添加点击事件,测试修改store里面的值
(测试结果—修改成功)
|
6 months ago |
riverflow
|
fc33bec564
|
在HelloWorld.vue中导入store,并获取store,测试引入是否成功
(测试结果—引入成功)
|
6 months ago |
riverflow
|
ea6b7fbb6f
|
创建store文件夹,定义了一个 Pinia store,用于在 Vue 应用中管理共享状态
|
7 months ago |
riverflow
|
43cd63ad76
|
安装pinia,导入到main.ts
|
7 months ago |
riverflow
|
9c3b90ceb0
|
在main.ts中全局注册图标组建,在HelloWorld.vue中测试引入是否成功
(测试结果---引入成功)
|
7 months ago |
riverflow
|
1306deeefa
|
安装Element-plus,导入到main.ts
|
7 months ago |
riverflow
|
98f2c3af13
|
测试路由是否搭载成功
|
7 months ago |
riverflow
|
11e206c55c
|
将创建好的路由引入到main.js中,并挂载路由
|
7 months ago |
riverflow
|
add3bd76b6
|
新建路由文件,配置路由
|
7 months ago |
riverflow
|
c17a03655c
|
安装vue官方路由
|
7 months ago |
riverflow
|
9fc369254a
|
配置tsconfig.json文件,为项目配置别名,简化路径
|
7 months ago |
riverflow
|
8672a05fa8
|
注释掉默认样式,避免影响后续开发
|
7 months ago |
riverflow
|
9b7cff634a
|
通过vue3的vite,npm工具创建vite前端项目
|
7 months ago |