从零开始自学微信小程序（一）

最新推荐文章于 2023-11-29 08:48:08 发布

Venzhane

最新推荐文章于 2023-11-29 08:48:08 发布

阅读量1.3k

点赞数 3

分类专栏：自学微信小程序文章标签： web javascript mysql 小程序 java

本文链接：https://blog.csdn.net/weixin_43898930/article/details/104382223

版权

自学微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发环境：MyEclipse2017 + Tomcat 8.5 + MySQL 5.7.26 + 微信开发者工具

emmmmm这些环境的搭建就不写了，网上太多了

之前通过看视频已经大概了解了微信小程序，现在开始实践

今天完成了简单的登录及登录成功后的页面跳转（还不完善，后期完善了会进行更新）

数据库设计：
在这里插入图片描述

前端部分代码（微信开发者工具实现）：

页面结构：（其中页面 tabMembers 和页面 tabMine 只是为了实现导航栏，里面的内容只是在view组件里面写了一句话，所以下面不会写）
在这里插入图片描述
全局配置文件 app.json

{
  "pages": [
    "pages/index/index",            //新建页面可以直接在此处加，方便又安全
    "pages/tabMembers/tabMembers",
    "pages/tabMine/tabMine",
    "pages/test/test",
    "pages/testfail/testfail",
    "pages/testsuccess/testsuccess",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#1296db",
    "navigationBarTitleText": "哦嚯",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,               //设置下拉刷新
    "backgroundTextStyle": "dark"
  },
  "tabBar":{                                        // 底部导航栏
    "selectedColor":"#1296db",
    "list":[
      {
        "pagePath":"pages/tabMembers/tabMembers",
        "text":"签到",
        "iconPath":"images/all.png",
        "selectedIconPath":"images/all_active.png"
      },
      {
        "pagePath": "pages/tabMine/tabMine",
        "text": "我的",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user_active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

登录页面 index.wxml

<!--index.wxml-->
<view class="container">
  <view class="login-form">
    <form bindsubmit="formSubmit" class="form">
      <!-- 学号 -->
      <view class="stunum">
        <view class="weui-cell weui-cell_input" style="">
          <image class="stuNumImage" src="../../images/user.png"></image>
          <view class="weui-cell_bd">
            <input class="weui-input" name="stunum" bindinput="stunuminput" value="{{stunum}}" placeholder="请输入学号" />
          </view>
        </view>
      </view>

      <!-- 密码 -->
      <view class="password">
        <view class="weui-cell weui-cell_input">
          <image class="stuNumImage" src="../../images/password.png"></image>
          <view class="weui-cell_bd">
            <input class="weui-input" type="password" name="password" bindinput="passwordinput" value="{{password}}" placeholder="请输入密码"/>
          </view>
        </view>
      </view>

      <view class="loginBtnView">
        <button class="loginBtn" size="{{primarySize}}" form-type="submit" disabled="{{disabled}}">登录</button>
      </view>
    </form>

  </view>
</view>

登录功能的 index.js 部分代码

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled:false,
    stunum:"",
    password:"",
    stunuminput:false,
    passwordinput:false
  },

  stunuminput:function(e){
    this.setData({ stunum: e.detail.value });  //将input框里面的数据赋值给页面初始数据stunum
    this.setData({stunuminput:true});
    if (this.data.stunuminput==true && this.data.passwordinput==true){
      this.setData({disabled:false});
    }
  },

  passwordinput: function (e) {
    this.setData({ password: e.detail.value });
    this.setData({ passwordinput: true });
    if (this.data.stunuminput == true && this.data.passwordinput == true) {
      this.setData({ disabled: false });
    }
  },

  formSubmit:function(e){
    console.log(e);
    this.setData({disabled:true});
    wx.request({
      url: 'http://localhost:8080/wechat/TestServlet',      //后端的url地址，这里是本地地址
      data:{         //传给后端的数据
        stunum:e.detail.value.stunum,
        password:e.detail.value.password
      },
      method: 'GET',
      header:{
        'content-type':'application/json'
      },
      success:function(res){
        console.log(res);
        if(res.statusCode==200){      // HTTP状态码，200表示已经获取到数据
          if(res.data=="error"){
            wx.navigateTo({
              url: '../testfail/testfail'          //不带tabBar的页面跳转到不带tabBar的页面
            })
          }else{
            wx.switchTab({
              url: '../tabMembers/tabMembers'           //不带tabBar的页面跳转到带tabBar的页面
            })
          }
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({disabled:false});
  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.data.stunum == '' || this.data.password == '') {
      this.setData({ disabled: true });
    } else {
      this.setData({ disabled: false });
    }
  },

登录页面的样式 index.wxss，登录页面还应用了weui的样式，可以下载了之后直接在app.wxss中导入：@import ‘weui.wxss’;

/**index.wxss**/

page {
  height: 100%;
  background-size: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

/* 表单内容 */

.login-form {
  margin-top: 50%;
  flex: auto;
  height: 100%;
}

/* 输入框 */

.stunum {
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 50rpx;
}

.password {
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 50rpx;
  margin-top: 20rpx;
}

/* 按钮 */

.loginBtnView {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 35rpx;
  color: #fff;
  background-color: #1296db;
  border: 0.1rpx solid #ccc;
  border-radius: 40rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stuNumImage{
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

然后是后台，在myeclipse中新建应该web项目，目录结构如下
在这里插入图片描述
先建立实体 User.java

package model;

public class User {
	private String stunum;
    private String password;
	public String getStunum() {
		return stunum;
	}
	public void setStunum(String stunum) {
		this.stunum = stunum;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
}

数据库操作 DB.java （不规范又怎么样呢，又不是不能用hhhhh）

package db;


import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import model.User;

public class DB {
	Connection ct=null;
    Statement stmt=null;
    public DB(){
    	try{	
    		Class.forName("com.mysql.jdbc.Driver");
    		ct=DriverManager.getConnection("jdbc:mysql://localhost:3306/aperson","root","root");
    	}catch(Exception e){
    		e.printStackTrace();
    	}
    }
    public User checkUser(String stunum,String password) throws SQLException{
    	try{
    		stmt=ct.createStatement();
    		String sql = "select * from user where stunum='"+stunum+"' and password='"+password+"'";
    		ResultSet rs=stmt.executeQuery(sql);
    		User user=new User();
    		while(rs.next()){
    			user.setStunum(rs.getString(1));第一个属性
    			user.setPassword(rs.getString(2));/第二个属性
    			return user;	///查到就返回对象
    		}
            return null;
    	}catch(Exception e){
     		e.printStackTrace();
    		return null;
    	}finally{
    		ct.close();
    		stmt.close();
    	}

    }
}

然后是 TestServlet.java 创建在默认的包下面

import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import model.User;
import db.DB;

public class TestServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		// 设置响应头允许ajax跨域访问
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "GET,POST");

		// 获取微信小程序get的参数值并打印
		String stunum = request.getParameter("stunum");
		String password = request.getParameter("password");
		System.out.println(stunum);
		System.out.println(password);

		DB db = new DB();/// 建立完成判断对象
		HttpSession session = request.getSession();// 创建保存信息对象
		User user = (User) session.getAttribute("user");

		if (user == null) {// 第一次进入
			try {
				user = db.checkUser(stunum, password);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} /// 如果账户密码正确，把返回的对象抛给user，不正确对象则为空
		}
		session.setAttribute("user", user);/// 保存对象
		Writer out = response.getWriter();

		if (user != null) {/// 有对象，用户名密码正确
			out.write("success");// 向小程序返回结果
		} else {// 对象为空
			out.write("error");
		}
		out.flush();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);

	}

}

然后记得在 web.xml 配置 servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name></display-name>
  <servlet>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>TestServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServlet</url-pattern>
  </servlet-mapping>
</web-app>

最后的实现效果：
在这里插入图片描述

Venzhane

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
从零开始自学微信小程序（一）

开发环境：MyEclipse2017 + Tomcat 8.5 + MySQL 5.7.26 + 微信开发者工具emmmmm这些环境的搭建就不写了，网上太多了之前通过看视频已经大概了解了微信小程序，现在开始实践今天完成了简单的登录及登录成功后的页面跳转（还不完善，后期完善了会进行更新）数据库设计：前端部分代码（微信开发者工具实现）：页面结构：（其中页面 tabMembers 和页面 ...
复制链接

扫一扫