[Java知识库]12-27号直播笔记（小程序登录+主页演示）

课程配套代码链接zip：https://www.jianguoyun.com/p/DV65yAEQiqGtCRjlsKQE

课程配套软件下载链接

https://www.jianguoyun.com/p/Dc5ht0AQ4_2rCRirw-kD

版本：JDK1.8，Mysql5.7+

Pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.properties配置

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mini-boot
spring.datasource.username=root
spring.datasource.password=123456

UserController.java:

package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.Optional;

@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserRepository userRepository;

    @PostMapping("/login")
    public User login(@RequestBody User user) {
        return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
    }

    // url: /user/1
    @GetMapping("/{id}")
    public User getUserById(@PathVariable Integer id) {
        Optional<User> user = userRepository.findById(id);
        return user.orElse(null);
    }
}

User.java:

package com.example.demo.entity;

import lombok.Data;

import javax.persistence.*;

@Entity
@Table(name = "user")
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String address;
}

UserRepository.java

package com.example.demo.repository;

import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Integer> {

    User findByUsernameAndPassword(String username, String password);

}

DemoApplication.java:

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

Mysql数据库 mini-boot 信息：

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `username` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名',
  `password` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  `nickname` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
  `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

微信小程序

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
vant-webapp文档地址: https://youzan.github.io/vant-weapp/#/home

npm创建vant-webapp:

0. 修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

1. 初始化：npm init -f
2. 安装vant依赖：npm i @vant/weapp -S --production
3. 修改 project.config.json：
{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

4. 构建npm

使用Button：

在 app.json中添加下面的配置
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

在 index.wxml中使用 Button 组件：

<van-button type="primary">按钮</van-button>

数据请求request > index.js:

// 同时发送异步请求的次数
let ajaxTimes = 0;
export const request = (params) => {
  ajaxTimes ++;
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  
  // 后台的请求地址，记得修改成你自己的地址
  const baseUrl = 'http://localhost:8080';
  
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        ajaxTimes --;
        if(ajaxTimes === 0) {  // 所有请求都完成后再关闭提示
          wx.hideLoading();
        }
      },
    })
  })
}

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/login/login"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTitleText": "校园小助手",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-field": "@vant/weapp/field/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-icon": "@vant/weapp/icon/index"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "imgs/home_no.png",
      "selectedIconPath": "imgs/home_yes.png"
    },
    {
      "pagePath": "pages/login/login",
      "text": "我的",
      "iconPath": "imgs/me_no.png",
      "selectedIconPath": "imgs/me_yes.png"
    }
  ]
  }
}

本地设置：非常关键！！！

登录页面编写：

login.wxml

<view style="padding: 20rpx 0; margin-top: 150rpx;">
  <view style="font-size: 60rpx;font-weight: bold; text-align: center; color: skyblue;">
    登 录
  </view>
 <view style="margin: 60rpx 100rpx">
  <van-field
    model:value="{{ username }}"
    left-icon="user-o"
    placeholder="请输入用户名"
  />
 </view>

 <view style="margin: 60rpx 100rpx">
  <van-field
    model:value="{{ password }}"
    left-icon="lock"
    placeholder="请输入密码"
  />
 </view>

 <view style="margin: 60rpx 100rpx">
 <van-button type="primary" bind:click="login">登 录</van-button>
 </view>

</view>

login.js:

import { request } from '../../request/index'


Page({

  data: {
    username: 'admin',
    password: 'admin'
  },
  login() {
    // 先构建请求的json
    let data = {
      username: this.data.username,
       password: this.data.password
      }
      // 发送请求给后台
      request({
        url: '/user/login',
        method: 'POST',
        data: data
      }).then(res => {
        // 接下来，问题就变得非常简单了
        if (res) {
          wx.showToast({
            title: '登录成功',
            icon: 'succcess'
          })
          wx.setStorageSync('user', res)

          setTimeout(() => {
            wx.navigateTo({
              url: '../index/index',
            })
          }, 1000)
         
        } else {
          wx.showToast({
            title: '账号或密码错误',
            icon: 'error'
          })
        }
      })
  }
  
})

login.wxss

.van-button--primary{
  width: 100%;
}

微信小程序窗口配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

首页 index.wxml:

<view style="margin: 20rpx 0;">
  <view style="margin: 40rpx; text-align: center;">
    <van-icon name="smile-o" size="50px" color="orange" />
  </view>
  <van-cell-group inset>
    <van-cell title="用户名" value="{{ user.username }}" />
    <van-cell title="昵称" value="{{ user.nickname }}" />
    <van-cell title="地址" value="{{ user.address }}" />
  </van-cell-group>
</view>

首页js：

import { request } from '../../request/index'

const app = getApp()

Page({
  data: {
   user: {}
  },
  onShow: function(e) {
    const user = wx.getStorageSync('user')
    if (user.id) {
      request({
        url: '/user/' + user.id ,
        method: 'GET'
      }).then(res => {
        this.setData({
          user: res
        })
      })
    } else {
      wx.switchTab({
        url: '../login/login',
      })
    }
  }

})

tabbar的图片imgs: