SprinBoot+Vue宠物领养接济微信小步调的操持与实现

---

1 项目先容

   博主个人先容：CSDN认证博客专家，CSDN平台Java范畴优质创作者，全网30w+粉丝，超300w访问量，专注于大弟子项目实战开发、解说和答疑辅导，对于专业性数据证明齐备！
重要项目：javaweb、ssm、springboot、vue、小步调、python、安卓、uniapp等操持与开发,万套源码制品可供选择学习。
  👇🏻👇🏻文末获取源码
SprinBoot+Vue宠物领养接济微信小步调的操持与实现(源码+数据库+文档)
项目形貌
本研究操持并实现了一个基于Springboot框架的小动物接济领养小步调。该小步调旨在为动物接济构造和爱心人士搭建一个平台，方便对流离动物举行接济和领养。本小步调的定位在于提供一个便捷快速的交换平台，在包管用户信息安全的同时，为动物接济古迹和流离动物探求更多机会和资源。
创新性方面，本小步调接纳了Springboot框架，实现了高效的开发和摆设，有效进步了小步调的性能和相应速率。同时，通过整合微信小步调接口和定制化开发，实现了用户的在线预约和动物信息的展示功能。别的，本小步调还引入了人工智能辨认技能，为用户提供更快速、正确的信息辨认和查询服务，大大进步了用户体验。
特色功能方面，本小步调提供了动物分类、领养预约、实时定位、在线付出等功能，用户可以根据自己的需求和喜好快速找到得当自己的动物并举行领养。同时，小步调还支持用户发布探求家的流离动物信息，资助更多动物找到温暖的故里。别的，小步调还提供动物康健档案管理和在线社区交换功能，促进用户之间的互动和交换。
本小步调的意义和代价在于提倡人与动物调和相处的理念，促进了社会公益古迹的发展和流离动物的掩护。同时，通过技能本领的运用，实现了动物接济信息的快速通报和动物领养过程的便捷化，进步了动物接济构造的服从和用户体验。将来，本研究将不绝美满和优化小步调功能，扩大用户覆盖范围，为更多的流离动物和有爱心的人士搭建桥梁，推动动物掩护古迹的发展。

2 项目截图


   springboot小动物接济领养小步调端演示录像


   springboot小动物接济领养小步调服务端演示录像

3 核心代码

3.1 Controller

2. package com.controller;
4. import java.util.Arrays;
5. import java.util.Calendar;
6. import java.util.Date;
7. import java.util.Map;
9. import javax.servlet.http.HttpServletRequest;
11. import org.springframework.beans.factory.annotation.Autowired;
12. import org.springframework.stereotype.Controller;
13. import org.springframework.web.bind.annotation.GetMapping;
14. import org.springframework.web.bind.annotation.PathVariable;
15. import org.springframework.web.bind.annotation.PostMapping;
16. import org.springframework.web.bind.annotation.RequestBody;
17. import org.springframework.web.bind.annotation.RequestMapping;
18. import org.springframework.web.bind.annotation.RequestParam;
19. import org.springframework.web.bind.annotation.ResponseBody;
20. import org.springframework.web.bind.annotation.RestController;
22. import com.annotation.IgnoreAuth;
23. import com.baomidou.mybatisplus.mapper.EntityWrapper;
24. import com.entity.TokenEntity;
25. import com.entity.UserEntity;
26. import com.service.TokenService;
27. import com.service.UserService;
28. import com.utils.CommonUtil;
29. import com.utils.MPUtil;
30. import com.utils.PageUtils;
31. import com.utils.R;
32. import com.utils.ValidatorUtils;
34. /**
35. * 登录相关
36. */
37. @RequestMapping("users")
38. @RestController
39. public class UserController{
40.        
41.         @Autowired
42.         private UserService userService;
43.        
44.         @Autowired
45.         private TokenService tokenService;
47.         /**
48.          * 登录
49.          */
50.         @IgnoreAuth
51.         @PostMapping(value = "/login")
52.         public R login(String username, String password, String captcha, HttpServletRequest request) {
53.                 UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
54.                 if(user==null || !user.getPassword().equals(password)) {
55.                         return R.error("账号或密码不正确");
56.                 }
57.                 String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
58.                 return R.ok().put("token", token);
59.         }
60.        
61.         /**
62.          * 注册
63.          */
64.         @IgnoreAuth
65.         @PostMapping(value = "/register")
66.         public R register(@RequestBody UserEntity user){
67. //            ValidatorUtils.validateEntity(user);
68.             if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
69.                     return R.error("用户已存在");
70.             }
71.         userService.insert(user);
72.         return R.ok();
73.     }
75.         /**
76.          * 退出
77.          */
78.         @GetMapping(value = "logout")
79.         public R logout(HttpServletRequest request) {
80.                 request.getSession().invalidate();
81.                 return R.ok("退出成功");
82.         }
83.        
84.         /**
85.      * 密码重置
86.      */
87.     @IgnoreAuth
88.         @RequestMapping(value = "/resetPass")
89.     public R resetPass(String username, HttpServletRequest request){
90.             UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
91.             if(user==null) {
92.                     return R.error("账号不存在");
93.             }
94.             user.setPassword("123456");
95.         userService.update(user,null);
96.         return R.ok("密码已重置为：123456");
97.     }
98.        
99.         /**
100.      * 列表
101.      */
102.     @RequestMapping("/page")
103.     public R page(@RequestParam Map<String, Object> params,UserEntity user){
104.         EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
105.             PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
106.         return R.ok().put("data", page);
107.     }
109.         /**
110.      * 列表
111.      */
112.     @RequestMapping("/list")
113.     public R list( UserEntity user){
114.                EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
115.               ew.allEq(MPUtil.allEQMapPre( user, "user"));
116.         return R.ok().put("data", userService.selectListView(ew));
117.     }
119.     /**
120.      * 信息
121.      */
122.     @RequestMapping("/info/{id}")
123.     public R info(@PathVariable("id") String id){
124.         UserEntity user = userService.selectById(id);
125.         return R.ok().put("data", user);
126.     }
127.    
128.     /**
129.      * 获取用户的session用户信息
130.      */
131.     @RequestMapping("/session")
132.     public R getCurrUser(HttpServletRequest request){
133.             Integer id = (Integer)request.getSession().getAttribute("userId");
134.         UserEntity user = userService.selectById(id);
135.         return R.ok().put("data", user);
136.     }
138.     /**
139.      * 保存
140.      */
141.     @PostMapping("/save")
142.     public R save(@RequestBody UserEntity user){
143. //            ValidatorUtils.validateEntity(user);
144.             if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
145.                     return R.error("用户已存在");
146.             }
147.         userService.insert(user);
148.         return R.ok();
149.     }
151.     /**
152.      * 修改
153.      */
154.     @RequestMapping("/update")
155.     public R update(@RequestBody UserEntity user){
156. //        ValidatorUtils.validateEntity(user);
157.             UserEntity u = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
158.             if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
159.                     return R.error("用户名已存在。");
160.             }
161.         userService.updateById(user);//全部更新
162.         return R.ok();
163.     }
165.     /**
166.      * 删除
167.      */
168.     @RequestMapping("/delete")
169.     public R delete(@RequestBody Long[] ids){
170.         userService.deleteBatchIds(Arrays.asList(ids));
171.         return R.ok();
172.     }
173. }

复制代码

3.2 Service

2. /**
3. * 系统用户
4. */
5. public interface UserService extends IService<UserEntity> {
6.         PageUtils queryPage(Map<String, Object> params);
7.    
8.            List<UserEntity> selectListView(Wrapper<UserEntity> wrapper);
9.           
10.            PageUtils queryPage(Map<String, Object> params,Wrapper<UserEntity> wrapper);
11.                   
12. }

复制代码

3.3 Dao

1. /**
2. * 用户
3. */
4. public interface UserDao extends BaseMapper<UserEntity> {
5.        
6.         List<UserEntity> selectListView(@Param("ew") Wrapper<UserEntity> wrapper);
8.         List<UserEntity> selectListView(Pagination page,@Param("ew") Wrapper<UserEntity> wrapper);
9.        
10. }

复制代码

3.4 application.yml

1. # Tomcat
2. server:
3.     tomcat:
4.         uri-encoding: UTF-8
5.     port: 8080
6.     servlet:
7.         context-path: /springbootpkh49
9. spring:
10.     datasource:
11.         driverClassName: com.mysql.jdbc.Driver
12.         url: jdbc:mysql://127.0.0.1:3306/springbootpkh49?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8
13.         username: root
14.         password: root
16. #        driverClassName: com.microsoft.sqlserver.jdbc.SQLServerDriver
17. #        url: jdbc:sqlserver://127.0.0.1:1433;DatabaseName=springbootpkh49
18. #        username: sa
19. #        password: 123456
21.     servlet:
22.       multipart:
23.         max-file-size: 10MB
24.         max-request-size: 10MB
25.     resources:
26.       static-locations: classpath:static/,file:static/
28. #mybatis
29. mybatis-plus:
30.   mapper-locations: classpath*:mapper/*.xml
31.   #实体扫描，多个package用逗号或者分号分隔
32.   typeAliasesPackage: com.entity
33.   global-config:
34.     #主键类型  0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
35.     id-type: 1
36.     #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
37.     field-strategy: 2
38.     #驼峰下划线转换
39.     db-column-underline: true
40.     #刷新mapper 调试神器
41.     refresh-mapper: true
42.     #逻辑删除配置
43.     logic-delete-value: -1
44.     logic-not-delete-value: 0
45.     #自定义SQL注入器
46.     sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
47.   configuration:
48.     map-underscore-to-camel-case: true
49.     cache-enabled: false
50.     call-setters-on-nulls: true
51.     #springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)
52.     jdbc-type-for-null: 'null'

复制代码

3.5 SpringbootApplication

1. @SpringBootApplication
2. @MapperScan(basePackages = {"com.dao"})
3. public class SpringbootSchemaApplication extends SpringBootServletInitializer{
5.         public static void main(String[] args) {
6.                 SpringApplication.run(SpringbootSchemaApplication.class, args);
7.         }
8.        
9.         @Override
10.     protected SpringApplicationBuilder configure(SpringApplicationBuilder applicationBuilder) {
11.         return applicationBuilder.sources(SpringbootSchemaApplication.class);
12.     }
13. }

复制代码

3.5 Vue

1. <template>
2.   <div>
3.     <div class="container loginIn" style="backgroundImage: url(http://codegen.caihongy.cn/20201206/eaa69c2b4fa742f2b5acefd921a772fc.jpg)">
5.       <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(255, 255, 255, 0.71)">
6.         <el-form class="login-form" label-position="left" :label-width="1 == 3 ? '56px' : '0px'">
7.           <div class="title-container"><h3 class="title" style="color: rgba(84, 88, 179, 1)">在线文档管理系统登录</h3></div>
8.           <el-form-item :label="1 == 3 ? '用户名' : ''" :class="'style'+1">
9.             <span v-if="1 != 3" class="svg-container" style="color:rgba(89, 97, 102, 1);line-height:44px"><svg-icon icon-class="user" /></span>
10.             <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
11.           </el-form-item>
12.           <el-form-item :label="1 == 3 ? '密码' : ''" :class="'style'+1">
13.             <span v-if="1 != 3" class="svg-container" style="color:rgba(89, 97, 102, 1);line-height:44px"><svg-icon icon-class="password" /></span>
14.             <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
15.           </el-form-item>
16.           <el-form-item v-if="0 == '1'" class="code" :label="1 == 3 ? '验证码' : ''" :class="'style'+1">
17.             <span v-if="1 != 3" class="svg-container" style="color:rgba(89, 97, 102, 1);line-height:44px"><svg-icon icon-class="code" /></span>
18.             <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
19.             <div class="getCodeBt" @click="getRandCode(4)" style="height:44px;line-height:44px">
20.               <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
21.             </div>
22.           </el-form-item>
23.           <el-form-item label="角色" prop="loginInRole" class="role">
24.             <el-radio
25.               v-for="item in menus"
26.               v-if="item.hasBackLogin=='是'"
27.               v-bind:key="item.roleName"
28.               v-model="rulesForm.role"
29.               :label="item.roleName"
30.             >{{item.roleName}}</el-radio>
31.           </el-form-item>
32.           <el-button type="primary" @click="login()" class="loginInBt" style="padding:0;font-size:16px;border-radius:4px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(84, 88, 179, 1); borderColor:rgba(84, 88, 179, 1); color:rgba(255, 255, 255, 1)">{{'1' == '1' ? '登录' : 'login'}}</el-button>
33.           <el-form-item class="setting">
34.             <!-- <div style="color:rgba(255, 255, 255, 1)" class="reset">修改密码</div> -->
35.           </el-form-item>
36.         </el-form>
37.       </div>
39.     </div>
40.   </div>
41. </template>
42. <script>
43. import menu from "@/utils/menu";
44. export default {
45.   data() {
46.     return {
47.       rulesForm: {
48.         username: "",
49.         password: "",
50.         role: "",
51.         code: '',
52.       },
53.       menus: [],
54.       tableName: "",
55.       codes: [{
56.         num: 1,
57.         color: '#000',
58.         rotate: '10deg',
59.         size: '16px'
60.       },{
61.         num: 2,
62.         color: '#000',
63.         rotate: '10deg',
64.         size: '16px'
65.       },{
66.         num: 3,
67.         color: '#000',
68.         rotate: '10deg',
69.         size: '16px'
70.       },{
71.         num: 4,
72.         color: '#000',
73.         rotate: '10deg',
74.         size: '16px'
75.       }],
76.     };
77.   },
78.   mounted() {
79.     let menus = menu.list();
80.     this.menus = menus;
81.   },
82.   created() {
83.     this.setInputColor()
84.     this.getRandCode()
85.   },
86.   methods: {
87.     setInputColor(){
88.       this.$nextTick(()=>{
89.         document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{
90.           el.style.backgroundColor = "rgba(255, 255, 255, 1)"
91.           el.style.color = "rgba(0, 0, 0, 1)"
92.           el.style.height = "44px"
93.           el.style.lineHeight = "44px"
94.           el.style.borderRadius = "2px"
95.         })
96.         document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{
97.           el.style.height = "44px"
98.           el.style.lineHeight = "44px"
99.         })
100.         document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{
101.           el.style.color = "rgba(89, 97, 102, 1)"
102.         })
103.         setTimeout(()=>{
104.           document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{
105.             el.style.color = "rgba(84, 88, 179, 1)"
106.           })
107.         },350)
108.       })
110.     },
111.     register(tableName){
112.       this.$storage.set("loginTable", tableName);
113.       this.$router.push({path:'/register'})
114.     },
115.     // 登陆
116.     login() {
117.       let code = ''
118.       for(let i in this.codes) {
119.         code += this.codes[i].num
120.       }
121.           if ('0' == '1' && !this.rulesForm.code) {
122.              this.$message.error("请输入验证码");
123.             return;
124.           }
125.       if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
126.          this.$message.error("验证码输入有误");
127.                 this.getRandCode()
128.         return;
129.       }
130.       if (!this.rulesForm.username) {
131.          this.$message.error("请输入用户名");
132.         return;
133.       }
134.       if (!this.rulesForm.password) {
135.          this.$message.error("请输入密码");
136.         return;
137.       }
138.       if (!this.rulesForm.role) {
139.          this.$message.error("请选择角色");
140.         return;
141.       }
142.       let menus = this.menus;
143.       for (let i = 0; i < menus.length; i++) {
144.         if (menus[i].roleName == this.rulesForm.role) {
145.           this.tableName = menus[i].tableName;
146.         }
147.       }
148.       this.$http({
149.         url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
150.         method: "post"
151.       }).then(({ data }) => {
152.         if (data && data.code === 0) {
153.           this.$storage.set("Token", data.token);
154.           this.$storage.set("role", this.rulesForm.role);
155.           this.$storage.set("sessionTable", this.tableName);
156.           this.$storage.set("adminName", this.rulesForm.username);
157.           this.$router.replace({ path: "/index/" });
158.         } else {
159.           this.$message.error(data.msg);
160.         }
161.       });
162.     },
163.     getRandCode(len = 4){
164.       this.randomString(len)
165.     },
166.     randomString(len = 4) {
167.       let chars = [
168.           "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
169.           "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
170.           "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
171.           "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
172.           "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
173.           "3", "4", "5", "6", "7", "8", "9"
174.       ]
175.       let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
176.       let sizes = ['14', '15', '16', '17', '18']
178.       let output = [];
179.       for (let i = 0; i < len; i++) {
180.         // 随机验证码
181.         let key = Math.floor(Math.random()*chars.length)
182.         this.codes[i].num = chars[key]
183.         // 随机验证码颜色
184.         let code = '#'
185.         for (let j = 0; j < 6; j++) {
186.           let key = Math.floor(Math.random()*colors.length)
187.           code += colors[key]
188.         }
189.         this.codes[i].color = code
190.         // 随机验证码方向
191.         let rotate = Math.floor(Math.random()*60)
192.         let plus = Math.floor(Math.random()*2)
193.         if(plus == 1) rotate = '-'+rotate
194.         this.codes[i].rotate = 'rotate('+rotate+'deg)'
195.         // 随机验证码字体大小
196.         let size = Math.floor(Math.random()*sizes.length)
197.         this.codes[i].size = sizes[size]+'px'
198.       }
199.     },
200.   }
201. };
202. </script>
203. <style lang="scss" scoped>
204. .loginIn {
205.   min-height: 100vh;
206.   position: relative;
207.   background-repeat: no-repeat;
208.   background-position: center center;
209.   background-size: cover;
211.   .left {
212.     position: absolute;
213.     left: 0;
214.     top: 0;
215.     width: 360px;
216.     height: 100%;
218.     .login-form {
219.       background-color: transparent;
220.       width: 100%;
221.       right: inherit;
222.       padding: 0 12px;
223.       box-sizing: border-box;
224.       display: flex;
225.       justify-content: center;
226.       flex-direction: column;
227.     }
229.     .title-container {
230.       text-align: center;
231.       font-size: 24px;
233.       .title {
234.         margin: 20px 0;
235.       }
236.     }
238.     .el-form-item {
239.       position: relative;
241.       .svg-container {
242.         padding: 6px 5px 6px 15px;
243.         color: #889aa4;
244.         vertical-align: middle;
245.         display: inline-block;
246.         position: absolute;
247.         left: 0;
248.         top: 0;
249.         z-index: 1;
250.         padding: 0;
251.         line-height: 40px;
252.         width: 30px;
253.         text-align: center;
254.       }
256.       .el-input {
257.         display: inline-block;
258.         height: 40px;
259.         width: 100%;
261.         & /deep/ input {
262.           background: transparent;
263.           border: 0px;
264.           -webkit-appearance: none;
265.           padding: 0 15px 0 30px;
266.           color: #fff;
267.           height: 40px;
268.         }
269.       }
271.     }
273.   }
275.   .center {
276.     position: absolute;
277.     left: 50%;
278.     top: 50%;
279.     width: 360px;
280.     transform: translate3d(-50%,-50%,0);
281.     height: 446px;
282.     border-radius: 8px;
283.   }
285.   .right {
286.     position: absolute;
287.     left: inherit;
288.     right: 0;
289.     top: 0;
290.     width: 360px;
291.     height: 100%;
292.   }
294.   .code {
295.     .el-form-item__content {
296.       position: relative;
298.       .getCodeBt {
299.         position: absolute;
300.         right: 0;
301.         top: 0;
302.         line-height: 40px;
303.         width: 100px;
304.         background-color: rgba(51,51,51,0.4);
305.         color: #fff;
306.         text-align: center;
307.         border-radius: 0 4px 4px 0;
308.         height: 40px;
309.         overflow: hidden;
311.         span {
312.           padding: 0 5px;
313.           display: inline-block;
314.           font-size: 16px;
315.           font-weight: 600;
316.         }
317.       }
319.       .el-input {
320.         & /deep/ input {
321.           padding: 0 130px 0 30px;
322.         }
323.       }
324.     }
325.   }
327.   .setting {
328.     & /deep/ .el-form-item__content {
329.       padding: 0 15px;
330.       box-sizing: border-box;
331.       line-height: 32px;
332.       height: 32px;
333.       font-size: 14px;
334.       color: #999;
335.       margin: 0 !important;
337.       .register {
338.         float: left;
339.         width: 50%;
340.       }
342.       .reset {
343.         float: right;
344.         width: 50%;
345.         text-align: right;
346.       }
347.     }
348.   }
350.   .style2 {
351.     padding-left: 30px;
353.     .svg-container {
354.       left: -30px !important;
355.     }
357.     .el-input {
358.       & /deep/ input {
359.         padding: 0 15px !important;
360.       }
361.     }
362.   }
364.   .code.style2, .code.style3 {
365.     .el-input {
366.       & /deep/ input {
367.         padding: 0 115px 0 15px;
368.       }
369.     }
370.   }
372.   .style3 {
373.     & /deep/ .el-form-item__label {
374.       padding-right: 6px;
375.     }
377.     .el-input {
378.       & /deep/ input {
379.         padding: 0 15px !important;
380.       }
381.     }
382.   }
384.   .role {
385.     & /deep/ .el-form-item__label {
386.       width: 56px !important;
387.     }
389.     & /deep/ .el-radio {
390.       margin-right: 12px;
391.     }
392.   }
394. }
395. </style>

复制代码

3.6 uniapp代码

1. <template>
2.         <view class="content">
3.                 <view class="box" :style='{"padding":"24rpx","background":"url(http://codegen.caihongy.cn/20231129/b245d02724c846eb81ec48ed8ffd3ba3.png)","width":"100%","backgroundSize":"cover","backgroundPosition":"center center","backgroundRepeat":"no-repeat","height":"100%"}'>
4.                         <view :style='{"width":"100%","padding":"24rpx 24rpx","position":"relative","flexWrap":"wrap","display":"flex","height":"auto"}'>
5.                                 <image :style='{"width":"120rpx","margin":"0 auto 24rpx","borderRadius":"50%","display":"block","height":"120rpx","order":"1"}' src="https://img-blog.csdnimg.cn/img_convert/51919a48762d28dc6336b713589210e9.webp?x-oss-process=image/format,png" mode="aspectFill"></image>
6.                                 <view v-if="loginType==1" :style='{"width":"100%","margin":"0 0 0","flexWrap":"wrap","display":"flex","height":"auto","order":"2"}' class="uni-form-item uni-column">
7.                                         <view :style='{"width":"100%","lineHeight":"88rpx","fontSize":"26rpx","color":"#000","textAlign":"left","fontWeight":"bold"}' class="label">账号：</view>
8.                                         <input v-model="username" :style='{"border":"2rpx solid #aaa","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"0","flex":"1","background":"none","borderWidth":"0 0 2rpx","fontSize":"28rpx","height":"88rpx"}' type="text" class="uni-input" name="" placeholder="请输入账号" />
9.                                 </view>
10.                                 <view v-if="loginType==1" :style='{"width":"100%","margin":"0 0 0","flexWrap":"wrap","display":"flex","height":"auto","order":"2"}' class="uni-form-item uni-column">
11.                                         <view :style='{"width":"100%","lineHeight":"88rpx","fontSize":"26rpx","color":"#000","textAlign":"left","fontWeight":"bold"}' class="label">密码：</view>
12.                                         <input v-model="password" :style='{"border":"2rpx solid #aaa","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"0","flex":"1","background":"none","borderWidth":"0 0 2rpx","fontSize":"28rpx","height":"88rpx"}' type="password" class="uni-input" name="" placeholder="请输入密码" />
13.                                 </view>
14.                                 <view v-if="roleNum>1" :style='{"width":"100%","margin":"0 0 24rpx 0","display":"block","height":"auto","order":"4"}'>
15.                                         <view :style='{"width":"100%","lineHeight":"88rpx","fontSize":"26rpx","color":"#000","textAlign":"left","fontWeight":"bold"}' class="label">用户类型：</view>
16.                                         <picker @change="optionsChange" :value="index" :range="options" :style='{"width":"100%","lineHeight":"48rpx","fontSize":"24rpx","textDecoration":"underline","color":"#424EF0","textAlign":"left"}'>
17.                                                 <view class="uni-picker-type">{{options[index]}}</view>
18.                                         </picker>
19.                                 </view>
20.                                
22.                                
23.                                 <button v-if="loginType==1" class="btn-submit" @tap="onLoginTap" type="primary" :style='{"border":"0","padding":"0px","margin":"24rpx auto ","color":"rgb(255, 255, 255)","borderRadius":"8rpx","background":"url(http://codegen.caihongy.cn/20231129/e83626e1e97e489099693ee9348afd12.png)","width":"120rpx","lineHeight":"120rpx","fontSize":"0","backgroundSize":"cover","backgroundPosition":"center center","backgroundRepeat":"no-repeat","fontWeight":"bold","height":"120rpx","order":"7"}'>→</button>
24.                                 <button v-if="loginType==2" class="btn-submit" @tap="onFaceLoginTap" type="primary" :style='{"border":"0","padding":"0px","margin":"24rpx auto ","color":"rgb(255, 255, 255)","borderRadius":"8rpx","background":"url(http://codegen.caihongy.cn/20231129/e83626e1e97e489099693ee9348afd12.png)","width":"120rpx","lineHeight":"120rpx","fontSize":"0","backgroundSize":"cover","backgroundPosition":"center center","backgroundRepeat":"no-repeat","fontWeight":"bold","height":"120rpx","order":"7"}'>人脸识别登录</button>
25.                                 <view class="links" :style='{"margin":"0 0 24rpx 0","flexWrap":"wrap","display":"flex","width":"100%","justifyContent":"flex-end","height":"auto","order":"6"}'>
26.                                         <view class="link-highlight" @tap="onRegisterTap('xuesheng')" :style='{"color":"#9E9E9E","padding":"0 12rpx","fontSize":"24rpx"}'>注册学生</view>
27.                                         <view class="link-highlight" @tap="onRegisterTap('jiaoshi')" :style='{"color":"#9E9E9E","padding":"0 12rpx","fontSize":"24rpx"}'>注册教师</view>
28.                                 </view>
29.                                
30.                                 <view class="idea1" :style='{"width":"100%","background":"red","display":"none","height":"80rpx"}'>idea1</view>
31.                                 <view class="idea2" :style='{"width":"100%","background":"red","display":"none","height":"80rpx"}'>idea2</view>
32.                                 <view class="idea3" :style='{"width":"100%","background":"red","display":"none","height":"80rpx"}'>idea3</view>
33.                         </view>
34.                 </view>
35.         </view>
36. </template>
38. <script>
39.         import menu from '@/utils/menu'
40.         export default {
41.                 data() {
42.                         return {
43.                                 username: '',
44.                                 password: '',
45.                 loginType:1,
46.                                 codes: [{
47.                                   num: 1,
48.                                   color: '#000',
49.                                   rotate: '10deg',
50.                                   size: '16px'
51.                                 }, {
52.                                   num: 2,
53.                                   color: '#000',
54.                                   rotate: '10deg',
55.                                   size: '16px'
56.                                 }, {
57.                                   num: 3,
58.                                   color: '#000',
59.                                   rotate: '10deg',
60.                                   size: '16px'
61.                                 }, {
62.                                   num: 4,
63.                                   color: '#000',
64.                                   rotate: '10deg',
65.                                   size: '16px'
66.                                 }],
67.                                 options: [
68.                                         '请选择登录用户类型',
69.                                 ],
70.                 optionsValues: [
71.                                         '',
72.                     'xuesheng',
73.                     'jiaoshi',
74.                                 ],
75.                                 index: 0,
76.                                 roleNum:0,
78.                         }
79.                 },
80.                 onLoad() {
81.                         let options = ['请选择登录用户类型'];
82.                         let menus = menu.list();
83.                         this.menuList = menus;
84.                         for(let i=0;i<this.menuList.length;i++){
85.                                 if(this.menuList[i].hasFrontLogin=='是'){
86.                                         options.push(this.menuList[i].roleName);
87.                                         this.roleNum++;
88.                                 }
89.                         }
90.                         if(this.roleNum==1) {
91.                                 this.index = 1;
92.                         }       
93.                         this.options = options;
94.                         this.styleChange()
95.                 },
96.                 onShow() {
97.                 },
98.                 mounted() {
99.                 },
100.                 methods: {
101.                         styleChange() {
102.                                 this.$nextTick(()=>{
103.                                         // document.querySelectorAll('.uni-input .uni-input-input').forEach(el=>{
104.                                         //   el.style.backgroundColor = this.loginFrom.content.input.backgroundColor
105.                                         // })
106.                                 })
107.                         },
108.                         onRegisterTap(tableName) {
109.                 uni.setStorageSync("loginTable", tableName);
110.                                 this.$utils.jump('../register/register')
111.                         },
112.                         async onLoginTap() {
113.                 if (!this.username) {
114.                                         this.$utils.msg('请输入用户名')
115.                                         return
116.                                 }
117.                 if (!this.password) {
118.                                         this.$utils.msg('请输入用户密码')
119.                                         return
120.                                 }
121.                 if (!this.optionsValues[this.index]) {
122.                                         this.$utils.msg('请选择登录用户类型')
123.                                         return
124.                                 }
126.                                 this.loginPost()
128.                         },
129.                         async loginPost() {
130.                                
131.                                 let res = await this.$api.login(`${this.optionsValues[this.index]}`, {
132.                                         username: this.username,
133.                                         password: this.password
134.                                 });
135.                                 uni.removeStorageSync("useridTag");
136.                                 uni.setStorageSync("appToken", res.token);
137.                                 uni.setStorageSync("nickname",this.username);
138.                                 uni.setStorageSync("nowTable", `${this.optionsValues[this.index]}`);
139.                                 res = await this.$api.session(`${this.optionsValues[this.index]}`);
140.                                 if(res.data.touxiang) {
141.                                     uni.setStorageSync('headportrait', res.data.touxiang);
142.                                 } else if(res.data.headportrait) {
143.                                     uni.setStorageSync('headportrait', res.data.headportrait);
144.                                 }
145.                                 uni.setStorageSync('userSession',JSON.stringify(res.data))
146.                                 // 保存用户id
147.                                 uni.setStorageSync("appUserid", res.data.id);
148.                                 if(res.data.vip) {
149.                                         uni.setStorageSync("vip", res.data.vip);
150.                                 }
151.                                 uni.setStorageSync("appRole", `${this.options[this.index]}`);
152.                                 this.$utils.tab('../index/index');
153.                         },
154.                         optionsChange(e) {
155.                                 this.index = e.target.value
156.                         }
157.                 }
158.         }
159. </script>
161. <style lang="scss" scoped>
162.         page {
163.                 height: 100%;
164.         }
165.        
166.         .content {
167.                 height: 100%;
168.                 box-sizing: border-box;
169.         }
170.        
171. </style>

复制代码

4 数据库表操持

用户注册实体图如图所示：

数据库表的操持，如下表：

5 文档参考

6 盘算机毕设选题保举

最新盘算机软件毕业操持选题大全：整理中…
7 源码获取

👇🏻获取接洽方式在文章末端 如果想入行提升技能的可以看我专栏其他内容：