一、開發(fā)環(huán)境
Spring Boot的開發(fā)環(huán)境如下：
1、IDEA：2020
2、JDK版本：1.8
3、MySQL 版本：8
二、搭建Spring Boot項(xiàng)目
1.創(chuàng)建項(xiàng)目
代碼如下（示例）：
打開IDEA，新建項(xiàng)目：
這里選擇Spring lnitializr：
在接下來的頁面中進(jìn)行如下配置：
進(jìn)行下一步：選擇SpringBoot的版本，這里選擇的是2.7.14
然后：
設(shè)置項(xiàng)目所在路徑和設(shè)置項(xiàng)目名稱：
項(xiàng)目創(chuàng)建好后，打開pom.xml,引入依賴，添加位置是在depedencies標(biāo)簽中。
<!--Spring Boot web依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis-plus框架 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.2</version>
</dependency>
<!--mysql數(shù)據(jù)庫庫-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.26</version>
</dependency>
<!--德魯伊-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.17</version>
</dependency>
注：
如果這里報(bào)錯(cuò)，把2.1.14之后的.release去掉
導(dǎo)入依賴后，在根目錄下創(chuàng)建controller文件夾，在其中新建LoginController，在其中書寫如下代碼：
@RestController
public class LoginController {
@Autowired
UserService userService;
@PostMapping("login")
public Result login(@RequestBody User user){
System.out.println(user);
User loginUser = userService.login(user);
System.out.println(loginUser);
if(loginUser == null){
return new Result(201,"用戶名或密碼錯(cuò)誤",loginUser);
}
return new Result(200,"登錄成功",loginUser);
}
}
新建entity文件夾，新建User實(shí)體類：
@Data
@ToString
public class User {
private String username;
private String password;
}
新建mapper文件夾，新建UserDao接口
@Repository
public interface UserDao {
@Select("select * from user where username = #{username} and password = #{password}")
User login(User user);
}
新建servie文件夾，創(chuàng)建UserService和它的實(shí)現(xiàn)類：
public interface UserService {
User login(User user);
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserDao userDao;
@Override
public User login(User user) {
User user1 = userDao.login(user);
return user1;
}
}
新建utils文件夾，在其中新建Result響應(yīng)體：
@Data
@ToString
public class Result {
private Integer code;
private String msg;
private Object data;
public Result(Integer code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public Result(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
}
最后，在application.yml文件中加入以下配置：
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/wechat?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: 123456
type: com.alibaba.druid.pool.DruidDataSource
server:
port: 8080
最終項(xiàng)目結(jié)構(gòu)如下：
2.創(chuàng)建數(shù)據(jù)庫
我使用的軟件是Navicate,創(chuàng)建名為wechat的數(shù)據(jù)庫，編碼格式選擇utf-8。
數(shù)據(jù)庫設(shè)計(jì)如下，命名為user.
創(chuàng)建好數(shù)據(jù)庫后，在其中添加數(shù)據(jù)如下：
在數(shù)據(jù)庫中添加其他數(shù)據(jù)即可實(shí)現(xiàn)多賬戶登錄。
后端和數(shù)據(jù)庫準(zhǔn)備完成后，點(diǎn)擊如下按鈕運(yùn)行項(xiàng)目：
看到如下結(jié)果說明項(xiàng)目在8080端口啟動(dòng)成功：
打開postman進(jìn)行測試，測試端口設(shè)置為localhost:8080/login,下圖顯示測試成功。
三、微信小程序端
端口測試成功后，打開微信小程序，更改之前的HTML和JS代碼（見本人主頁前文），和CSS不用作任何更改
1、HTML代碼：
<view class="welcome">
<p>歡迎使用智能門禁系統(tǒng)</p>
</view>
<view class='login_block' >
<view><span class="iconfont icon-geren"></span><input type='text' placeholder="請輸入宿舍號(hào)" bindinput='inputUsr' class='input' value="{{ username }}"
model:value="{{ username }}"></input></view>
<view><span class="iconfont icon-mima1"></span><input password='true' placeholder="請輸入通行密碼" bindinput='inputPwd'class='input'value="{{ password }}"
model:value="{{ password }}"></input></view>
<button type='primary' bindtap='login' class="confirm">確定</button>
</view>
2、JavaScript代碼：
// pages/login/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
password_input: "",
username: "admin",
password: "123456"
},
login: function () {
if (this.data.username == "" || this.data.password == "") {
wx.showToast({
title: '請輸入宿舍號(hào)和密碼',
icon: 'none',
duration: 2000
})
} else {
wx.request({
url: 'http://localhost:8080/login',
method: 'POST',
data: {
username: this.data.username,
password: this.data.password
},
success: (res) => {
console.log(res)
if (res.data.code == 200) {
wx.showToast({
title: res.data.msg,
icon: 'success',
duration: 2000
})
setTimeout(function(){
wx.navigateTo({
url: '/pages/hello/hello',
})
},2000);
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
})
return;
}
wx.setStorage(
{
key: "username",
data: this.data.username,
}
)
wx.setStorage(
{
key: "password",
data: this.data.password,
}
)
}
})
}
}
})
如果頁面時(shí)TabBar頁面，需要使用
wx.switchTab({
url: '/pages/index/index',
})
完成后，測試結(jié)果：
登錄成功后成功跳轉(zhuǎn)到index頁面：
文章來源：http://www.zghlxwxcb.cn/news/detail-815740.html
總結(jié)
以上便是Spring Boot+微信小程序+MySQL實(shí)現(xiàn)登錄功能與頁面跳轉(zhuǎn)的全部功能，這種實(shí)現(xiàn)方式較為簡陋，僅為學(xué)習(xí)使用，希望大家多多點(diǎn)贊支持。
遇到問題大家可以私聊我哦。文章來源地址http://www.zghlxwxcb.cn/news/detail-815740.html
到了這里，關(guān)于微信小程序登錄頁驗(yàn)證與頁面跳轉(zhuǎn)(二) ---結(jié)合SpringBoot和MySQL實(shí)現(xiàn)多用戶登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
