微信小程序全栈实战(一)：登陆注册

1.项目技术栈

后端

• SpringBoot
• SpringData JPA
• SwaggerUI 2.0
• MySQL5.x

前端

• 微信小程序
• WeAppUI

数据库

• MySQL

PS：这里前端使用了WeAppUI框架，可忽略，只是美化样式而已
具体参考：
https://blog.csdn.net/u014131617/article/details/86681244

2.后端代码开发

0.依赖

<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.1.2.RELEASEversion>
        <relativePath/> 
    parent>
    <groupId>com.jianshen.bckgroupId>
    <artifactId>jianshen-home-mangerartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>jianshen-home-mangername>
    <description>Demo project for Spring Bootdescription>

    <properties>
        <java.version>1.8java.version>
    properties>

    <dependencies>
        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-jpaartifactId>
        dependency>

        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.47version>
        dependency>

        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>

        dependency>
        
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger2artifactId>
            <version>2.6.1version>
        dependency>
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger-uiartifactId>
            <version>2.6.1version>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-devtoolsartifactId>
            <optional>trueoptional>
        dependency>


        
        <dependency>
            <groupId>commons-codecgroupId>
            <artifactId>commons-codecartifactId>
            <version>1.11version>
        dependency>
        <dependency>
            <groupId>org.apache.commonsgroupId>
            <artifactId>commons-lang3artifactId>
            <version>3.4version>
        dependency>
        <dependency>
            <groupId>org.apache.commonsgroupId>
            <artifactId>commons-ioartifactId>
            <version>1.3.2version>
        dependency>

    dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
            plugin>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <dependencies>
                    
                    <dependency>
                        <groupId>org.springframeworkgroupId>
                        <artifactId>springloadedartifactId>
                        <version>1.2.6.RELEASEversion>
                    dependency>
                dependencies>
                <configuration>
                    <mainClass>cn.springboot.MainspringbootmainClass>
                configuration>
            plugin>
        plugins>
    build>

project>

1.yml配置文件

#Spring
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///jianshen
    username: root
    password: root
    
  

#SpringData
  jpa:
    hibernate:
      dialect: org.hibernate.dialect.MySQL5Dialect
      ddl-auto: update
    show-sql: true
    database: mysql

#MVC
  mvc:
    static-path-pattern: /**

#tomcat
server:
  port: 90
  tomcat:
    max-threads: 7000
    max-connections: 30000

2.启动类

@EnableAsync //开启异步
@RestController(value = "/")
@CrossOrigin //开启跨域
@Configuration
@EnableAutoConfiguration
@ComponentScan(basePackages = {"com.jianshen.bck.jianshenhomemanger"})
//@SpringBootApplication
public class JianshenHomeMangerApplication {

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

    @ApiOperation(value="欢迎页面", notes="显示欢迎页面")
    @GetMapping(value={"/","/index","welcome"})
    public String index() {
        System.out.println("hello");
        return "hello";
    }


    //===================SwaggerUI声明：=====================
    //  访问 http://localhost:90/swagger-ui.html 即可
    //======================================================


}

3.测试访问

4.写后台代码

1.实体类

package com.jianshen.bck.jianshenhomemanger.po;

import javax.persistence.*;

@Entity
@Table(name="t_user")
public class User {
    @Id
    @GeneratedValue
    @Column(length = 11)
    private Integer id;

    @Column(length = 20)
    private String username;
    
    @Column(length = 11)
    private Integer isJs;			//'是否是健身教练(1是，0不是)',
    
    @Column(length = 11)
    private Integer isPm;			//'是否是管理员(1是 0不是)'

    @Column(length = 20)
    private String nickname;
    
    @Column(length = 20)
    private String password;
    
    public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	@Column(length = 11)
    private Integer age;
    
    @Column(length = 20)
    private String sex; 			//'男，女 字符串表示'
    
    @Column(length = 20)
    private String name;
    
    @Column(length = 255)
    private String describe;
    
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public Integer getIsJs() {
		return isJs;
	}

	public void setIsJs(Integer isJs) {
		this.isJs = isJs;
	}

	public Integer getIsPm() {
		return isPm;
	}

	public void setIsPm(Integer isPm) {
		this.isPm = isPm;
	}

	public String getNickname() {
		return nickname;
	}

	public void setNickname(String nickname) {
		this.nickname = nickname;
	}

	public Integer getAge() {
		return age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

	public String getDescribe() {
		return describe;
	}

	public void setDescribe(String describe) {
		this.describe = describe;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public void setName(String name) {
        this.name = name;
    }

}

2.Dao接口

package com.jianshen.bck.jianshenhomemanger.dao;

import com.jianshen.bck.jianshenhomemanger.po.User;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

/**
 * 增删改需用@modify注解
 * 使用原生sql > @Query(value="select * from t_book order by RAND() LIMIT ?1",nativeQuery=true)
 */
public interface UserDao extends JpaRepository<User,Integer> {

	/***
	 * 单个用户查询
	 * @param id
	 * @return
	 */
	@Query(value="select * from t_user WHERE id=:id",nativeQuery=true)
	User getUserById(@Param("id")Integer id);
}

3.Service层

package com.jianshen.bck.jianshenhomemanger.service;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Example;
import org.springframework.stereotype.Service;
import com.jianshen.bck.jianshenhomemanger.dao.UserDao;
import com.jianshen.bck.jianshenhomemanger.po.User;

/**
 * @date ${date} ${time}
 */
@Service
public class UserSer {

    @Autowired
    private UserDao dao;
    
    public List<User> userAll(){
    	return dao.findAll();
    }
    
    public User getUserById(Integer id) {
		return dao.getUserById(id);
    }
    
    public User addUser(User user) {
    	return dao.save(user);
    }
    
    public void delUser(Integer id) {
    	 dao.deleteById(id);
    }
    

    
    public User UserLogin(String username,String password) {
    	return dao.getUserInfo(username, password);
    }
    
}

4.web层

package com.jianshen.bck.jianshenhomemanger.web;

import com.jianshen.bck.jianshenhomemanger.po.User;
import com.jianshen.bck.jianshenhomemanger.service.UserSer;
import com.jianshen.bck.jianshenhomemanger.utils.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@ApiModel("用户模块")
@Api(tags="User模块")
@CrossOrigin //开启跨域
public class UserController {

    @Autowired
    private UserSer ser;



    /**
     * 登陆或注册
     * @return
     */
    @GetMapping("/1007")
    @ApiOperation(value="登陆或注册", notes="登陆或注册,参数：username,password")
    @Transactional(propagation = Propagation.SUPPORTS) // 查询用SUPPORTS 增删改用REQUIRED
    public Result LoginOrRegist(String username,String password){
        Result result = new Result();
        User user = ser.UserLogin(username, password);
        if(user==null) {
        	User user1=new User();
        	user1.setIsPm(0);
        	user1.setUsername(username);
        	user1.setPassword(password);
        	ser.addUser(user1);
        	result.setData(1);
    	    result.setOk(Result.ok().getOk()); 
    	    result.setStatus(200);
    	    result.setMsg("注册成功");
    	    return result;
        }
	    result.setData(user);
	    result.setOk(Result.ok().getOk()); 
	    result.setStatus(200);
	    result.setMsg("登陆成功"); 
        return result;
    }
    
}

5.开发小程序

1.小程序页面

<text class="title_font_css1">健身信息服务text>
<view >
 <video style="width: 100%;height=400px;margin:1px;" src="{{videoUrl}}" binderror="videoErrorCallback" autoplay="true" muted="false" show-fullscreen-btn="false" show-play-btn="false"  controls="false">video>
view>

<view class='container2'>
  <text class="title_font_css2">—— 登录 ——text>
view>
  
  <i-input value="{{ username }}" type="text" right title="用户名" mode="wrapped" placeholder="请输入用户名" />
    <i-input value="{{ password }}" type="number" right  title="密码"  mode="wrapped"  placeholder="请输入密码" />


    <i-button bindtap="loginClick" type="info" shape="circle">登录 / 注册i-button>


<i-toast id="toast" />

页面这里要注意，{{xxx}}是取他js里面的data里面的数据，类似于vue的渲染
bindtap就是click时间，里面写方法名，方法也在js里面定义即可

2.login.js

// pages/login/login.js
const { $Toast } = require('../../dist/base/index');

Page({

  /**
   * 页面的初始数据
   */
  data: {

    /**
     * 登录页面-视频连接
     */
    videoUrl:'http://v.youku.com/32dc862a-f508-44b8-8cab-8027a66bdcfb',

    /**
     * 用户信息
     */
    username:'test111',
    password:'pwd1111',

    /**
     * url配置信息
     */
    url:"http://localhost:90/",
  },


  //注册
  loginClick(e){
    console.log('[你当前在执行登录/注册操作]'+this.data.username,this.data.password)

    wx.request({
      url:  this.data.url+'1007'+'?username='+this.data.username+'&password='+this.data.password, // 仅为示例，并非真实的接口地址
      data: {
      },
      method: "GET",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res)
        wx.reLaunch({
          url: '/pages/index/index'
        })
      }
    })
   
  }

})

使用 wx.request发送请求，注意跨域问题影响，以下为模板，可复制,get请求直接在url后追加，post在data里面写和ajax一样的效果

wx.request({
     url: ip:port/getXXX?parm1=111&parm2=222, // 仅为示例，并非真实的接口地址
     data: {
     },
     method: "GET", //和ajax一样的请求方式 [POST/DELETE]
     header: {
       'content-type': 'application/json' // 默认值
     },
     success(res) {
       console.log("==============请求成功回调==============")
       //wx.reLaunch类似于js里面的location.href 跳页面的，写的时候写绝对路径/开头
       wx.reLaunch({
         url: '/pages/index/index'
       })
     }
   })
 }

3.启动测试

当我们点击登录后

请求成功

这里未做登录失败验证，只是一个简单的demo

附

如果请求不通，问题如下

• 1 查看NetWork有没有报错
• 2 后台接口问题
• 3 js问题
• 4 [常见] 开发工具未配置

需要配置开发工具

设置 - 项目设置-

打上勾即可

下一篇文章讲这么渲染列表