当前位置：首页 > news >正文

Uniapp-小程序从入门到精通

news 来源：原创 2025/4/25 5:58:40

沉淀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遮罩层

<view>
   <uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" style="width: 100%;">
       <view style="padding: 0 10px;position: relative;top:-10px;width: 360px;">
           <view style="background-color: white;padding: 0 10px;border-radius: 1%;">
               
               <view style="display: flex;justify-content: center;align-items: center;font-size: 15px;padding: 0 10px;line-height: 45px;
               margin-top: 20px;border-bottom: 1px solid lightgray;">
                   <text
                       style="font-weight: bold;background-color: #169AD4;color: white;width: 100%;text-align: center;">
                       测评记录详情
                   </text>
               </view>
               
               <view style="display: flex;justify-content: space-between;align-items: center;font-size: 15px;padding: 0 10px;
               line-height: 25px;">
                   <view>
                       评测人：{{item.status}}
                   </view>
               </view>
               
               <view
                   style="display: flex;justify-content: space-between;padding: 20px 50px;border-top: 1px solid lightgray;">
                   <view style="border: 1px solid #169AD4;width: 100px;height: 40px;
                       text-align: center;line-height: 40px;color: #169AD4;" @click="this.$refs['popup'].close()">关闭</view>
                   <view style="background-color: #169AD4;border: 1px solid #169AD4;width: 100px;height: 40px;
                       text-align: center;line-height: 40px;color: white;" @click="windowConfirm('传递修改的值')">确认</view>
               </view>
           </view>
       </view>
   </uni-popup>
</view>

************************************************************************
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
}
})
},
*******************************************************************************************************************************************
审核状态选择框
<el-form-item label="审核状态">
<el-select style="width: 100%" v-model="sendForm.status">
<el-option v-for="item in ['待审核', '通过', '拒绝']" :key="item" :value="item" :label="item"></el-option>
</el-select>
</el-form-item>
*******************************************************************************************************************************************
老师遇到的错误就离谱，用mybatis-plus都不存在了~
*******************************************************************************************************************************************
5、商家的修改、删除、分页查询【只有不断学习总结，才能青出于蓝而胜于蓝！得心应手，成为高手】
*******************************************************************************************************************************************
6、开发用户管理
*******************************************************************************************************************************************
7、开放商家注册、登录功能、权限校验功能
【1】尽信书不如无书，尽信视频不如无视频！还是要有自己的思路和想法，不要被需求牵着鼻子走！
【2】这里的反思来自，用户管理的地方应该就一个地方，不应该有多个，导致思路混乱。
*******************************************************************************************************************************************
8、商家个人信息的修改
【1】再次证明功能可以基于原来包一层，但是不要加条并行。
【2】大道至简
*******************************************************************************************************************************************
9、开发商品分类功能
【1】万变不离其宗，最多的不过是增删改查~
*******************************************************************************************************************************************
10、开发商品管理功能 5分钟
【1】图片展示代码【百研究，不如一学一总结】！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&展示
<el-table-column prop="image" label="商品图片"> 
<template v-slot="scope">
<div style="display: flex;align-items: center; justify-content: center;">
<el-image style="width: 40px;height: 40px;" v-if="scope.row.image"
:src="scope.row.image" :preview-src-list="[scope.row.image]">
</el-image>
</div>
</template>
</el-table-column>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&修改
<el-form-item label="商品图片">
<el-upload class="avatar-uploader"
name="multipartFile"
:action="'http://'+WHITE_IP+'/document/upload'"
:headers="{token:user.token}"
list-type="picture"
:file-list="imageFileList"
:on-success="onSuccessImage">
<el-button type="primary">上传商品图片</el-button>
</el-upload>
</el-form-item>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&方法指定字段
onSuccessImage(res) { // 方法名字后面固定吧，只改字段名
this.sendForm.image = res; // 这个方法就决定了哪个字段用图片
},

/*新增窗口*/
insertWindow() {
this.sendFormFlag = true
this.imageFileList = [] // 把图片置为空，防止引用历史图片！！！！！！！！！！！
this.sendForm = {} // 初始化新增空白表单
},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
【2】使用序号，而不是ID
<el-table-column type="index" :index="hIndex" label="序号" width="60"/>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
hIndex(index) {
// 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）
return (this.send.currentPage - 1) * this.send.pageSize + index + 1
},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&选择框 ['待审核', '通过', '拒绝']可以写成变量！！！！
<el-form-item label="审核状态">
<el-select style="width: 100%" v-model="sendForm.status">
<el-option v-for="item in ['待审核', '通过', '拒绝']" :key="item" :value="item" :label="item"></el-option>
</el-select>
</el-form-item>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
日期控件的使用
<el-form-item label="完税属期">
<div class="block">
<el-date-picker
v-model="sendForm.taxPeriod"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>

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】评分功能展示
<div class="block">
<span class="demonstration">默认不区分颜色</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">区分颜色</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>