Uniapp-小程序从入门到精通
沉淀UNIAPP项目精华模版
*******************************************************************************************************************************************
1、数据库的导入SQL
*******************************************************************************************************************************************
2、环境的配置
*******************************************************************************************************************************************
3、项目结构讲解【分页的逻辑是自己实现的，就不存在BUG】
*******************************************************************************************************************************************
4、SPRINGBOOT结构概述
*******************************************************************************************************************************************
5、VUE概述都是自己总结的模版知识梳理
*******************************************************************************************************************************************
1、项目概述
【1】Web管理员界面、管理商家、管理商品分配商品详情、管理设置广告、所有用户收藏的商家、对商家评价、系统公告
【2】商家：注册、登录、本店商品分类、本店商品、用户外卖订单、用户对本店的评价
【3】小程序端：注册登录、个人中心修改密码、首页搜索商家、商家详情页、购物车、订单、我的个人信息
【4】SPRINGBOOT+MYBATISPLUS/VUE+ELEMENTUI/MYSQL/IDEA
【5】项目概述和介绍
*******************************************************************************************************************************************
【1】https配置
server.port=443
server.ssl.key-store=classpath:www.wdfgdzx.top.pfx
server.ssl.key-store-password=q90n2e3d
server.ssl.keyStoreType=PKCS12
【2】前端注意配置请求443和https的文件
【3】npm install uview-ui
【4】UNIAPP遮罩层
测评记录详情
评测人：{{item.status}}
************************************************************************
toggle(item) {
this.item = item;
this.$refs['popup'].open(); // 打开隐藏窗口
},
windowConfirm(confirmInfo) { // 点击确认窗口
// console.log(confirmInfo)
this.$refs['popup'].close();
},
*******************************************************************************************************************************************
2、商家查询接口
【1】商家表格设计
*******************************************************************************************************************************************
3、商家新增接口
*******************************************************************************************************************************************
规则校验的使用，很严格，要细心
confirmInsertOrUpdate() {
this.$refs["sendFormRef"].validate(valid => {
if (valid) {
// 表单校验合法，合法就放行，否则拦截
this.sendFormFlag = false
this.$http.post("/business/insertOrUpdate", this.sendForm).then(res => {
console.log(res.data)
if (res.data.code === "200") {
this.$message.success('保存成功')
} else {
this.$message.error('保存失败，' + res.data.message)
}
this.selectListPage()
})
} else {
return
}
})
},
*******************************************************************************************************************************************
审核状态选择框
*******************************************************************************************************************************************
老师遇到的错误就离谱，用mybatis-plus都不存在了~
*******************************************************************************************************************************************
5、商家的修改、删除、分页查询【只有不断学习总结，才能青出于蓝而胜于蓝！得心应手，成为高手】
*******************************************************************************************************************************************
6、开发用户管理
*******************************************************************************************************************************************
7、开放商家注册、登录功能、权限校验功能
【1】尽信书不如无书，尽信视频不如无视频！还是要有自己的思路和想法，不要被需求牵着鼻子走！
【2】这里的反思来自，用户管理的地方应该就一个地方，不应该有多个，导致思路混乱。
*******************************************************************************************************************************************
8、商家个人信息的修改
【1】再次证明功能可以基于原来包一层，但是不要加条并行。
【2】大道至简
*******************************************************************************************************************************************
9、开发商品分类功能
【1】万变不离其宗，最多的不过是增删改查~
*******************************************************************************************************************************************
10、开发商品管理功能 5分钟
【1】图片展示代码【百研究，不如一学一总结】！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&展示
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&修改
:action="'http://'+WHITE_IP+'/document/upload'"
:headers="{token:user.token}"
list-type="picture"
:file-list="imageFileList"
:on-success="onSuccessImage">
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&方法指定字段
onSuccessImage(res) { // 方法名字后面固定吧，只改字段名
this.sendForm.image = res; // 这个方法就决定了哪个字段用图片
},
/*新增窗口*/
insertWindow() {
this.sendFormFlag = true
this.imageFileList = [] // 把图片置为空，防止引用历史图片！！！！！！！！！！！
this.sendForm = {} // 初始化新增空白表单
},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
【2】使用序号，而不是ID
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
hIndex(index) {
// 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）
return (this.send.currentPage - 1) * this.send.pageSize + index + 1
},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&选择框 ['待审核', '通过', '拒绝']可以写成变量！！！！
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
日期控件的使用
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
if (this.sendForm.taxPeriod == null) { // 判断非空
return this.$message.error("完税属期为空，修改失败")
}
console.log(this.sendForm.releaseTime);
*******************************************************************************************************************************************
11、开发广告管理功能
【1】主要是改善了图片上传和动态查询功能！！！
【2】需要什么数据信手拈来了，动态查询就体现了这点（动态查询所有商家名称~~~）
*******************************************************************************************************************************************
12、开发订单管理功能
【1】增删改查就不再赘述
【2】从network可以看请求和返回数据！！！！，而不用只会用console.log！！！
*******************************************************************************************************************************************
13、开发收藏管理功能
【1】从MYSQL-POJO-Mapper-Controller-Vue依次展示和调试
*******************************************************************************************************************************************
14、开发评论管理功能
【1】评分功能展示
默认不区分颜色
区分颜色
:colors="colors">
*******************************************************************************************************************************************
15、小程序
【1】注册小程序账号---
【2】多学习风格与技巧
*******************************************************************************************************************************************
16、登录页面设计，20分钟
【1】https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
组件名：uni-forms
代码块： uForms、uni-forms-item 关联组件：uni-forms-item、uni-easyinput、uni-data-checkbox、uni-group。
点击下载&安装
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
[uni_modules] 21:46:57.097 [uniapp][[email protected]] 开始下载
[uni_modules] 21:46:57.449 [uniapp][[email protected]] 已下载到临时目录
[uni_modules] 21:46:58.082 [uniapp][[email protected]][[email protected]] 开始下载
[uni_modules] 21:46:58.436 [uniapp][[email protected]][[email protected]] 已下载到临时目录
[uni_modules] 21:46:58.436 [uniapp][[email protected]][[email protected]] 开始下载
[uni_modules] 21:46:58.908 [uniapp][[email protected]][[email protected]] 已下载到临时目录
[uni_modules] 21:46:59.795 [uniapp][[email protected]] 导入[uniapp/uni_modules]成功
【2】多学习风格与技巧组件名：uni-easyinput
代码块： uEasyinput
点击下载&安装
// 登录方法
login() {
this.$http.post("/big/login", this.myForm).then(res => {
// console.log(res)
if (res.code == "200") {
uni.showToast({
icon: "success",
title: "登录成功"
})
// 设置本地存储user
uni.setStorageSync("user", res.object)
// 跳转主页
uni.switchTab({
url: "/pages/index/index"
})
// uni.navigateTo({
// url: "/pages/index/index"
// })
} else {
uni.showToast({
icon: "error",
title: res.message
})
}
})
}
*******************************************************************************************************************************************
17、开发注册页面并对接后台接口 19分钟
【1】规则的编写与绑定
编写规则---绑定到表单---触发
*******************************************************************************************************************************************
18、开发轮播图、公告、商家列表 10分钟
【1】说白了，就是在调试小程序的样式，不然就不美观~~~
【2】美观2000，不美观可能500，这个没办法，市场美学~~~
*******************************************************************************************************************************************
19、商家详情页面、商品分类列表详情 35分钟
【1】商家详情页面
【2】主要还是页面布局
*******************************************************************************************************************************************
20、开发购物车功能 17分钟
【1】用到组件
【2】下方页面弹窗 uni-popup https://ext.dcloud.net.cn/plugin?name=uni-popup
【3】后端代码编写，数据库操作
*******************************************************************************************************************************************
21、订单确认页面开发46分钟
【1】confire.vue 确认页面
*******************************************************************************************************************************************
22、收货地址管理、订单备注功能开发
【1】address.vue
【2】地址详情维护---新增地址按钮点击
【3】订单提交页面orderComment.vue
*******************************************************************************************************************************************
23、下单、订单功能开发 1小时35分钟
【1】主要是页面组件使用与页面美化
*******************************************************************************************************************************************
25、订单详情开发
【1】uin.navigateTo
【2】订单状态-关联中心
*******************************************************************************************************************************************
26、开发个人中心
【1】导航到其他页面
*******************************************************************************************************************************************
27、开发收藏功能
【1】收藏的功能---收藏的颜色标记（其实就是根据变量的值 来决定UNIAPP颜色 v-if v-else）
【2】添加收藏---如果收藏过了 就需要取消收藏---如果没收藏则添加收藏
【3】修改收藏
【4】收藏点击后 收藏内容的显示
*******************************************************************************************************************************************
28、评价中心
【1】头像---名称---评价内容---时间---星级
【2】评价内容的布局与展示
*******************************************************************************************************************************************
29、个人信息修改功能
【1】uni.reLaunch({ // 这个方法很重要，可以自动刷新修改页面的昵称信息
url: '/pages/my/my'
})
*******************************************************************************************************************************************
30、开发搜索、商家评分功能
【1】search搜索页面
【2】设置商品额外的信息
*******************************************************************************************************************************************
31、项目测试&OVER
【1】主要是解决项目使用过程中的一些问题