mpvue +java 一个小项目后台+小程序项目

github地址: https://github.com/binlian/binglian-MpvueBook 首先看下模板,后台登录是java，前台才是mpvue小程序微信小程序 mpvue 官方文档 http://mpvue.com/mpvue/记得需要安装node.js环境mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js...

冰怜

1068人浏览 · 2018-12-25 12:40:17

冰怜 · 2018-12-25 12:40:17 发布

github地址: https://github.com/binlian/binglian-MpvueBook

首先看下模板,后台登录是java，前台才是mpvue小程序

微信小程序

mpvue 官方文档 http://mpvue.com/mpvue/

记得需要安装node.js环境

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。所以会vue 上手很快，如果你想开发微信小程序，不需要在去学小程序

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

环境好了之后然后我们进入mpvue项目，mpvue创建详细可以看看百度的教程

输入命令，成功是绿色的，然后需要我们去打开微信开发工具，这些新手详细百度，我们重点讲下代码

由于mpvue 更新了一下必须要app.json

而那些更新之前的教程，在main.js中，所以这是坑，还有全局配置，想弄局部变量，其实在当前页面包下创建一个main.json就行，下面是一个以前版本写法，和局部配置文件图片

现在正是开始，微信小程序文档

https://developers.weixin.qq.com/miniprogram/dev/api/

这其实就是小程序，的json配置，pages是路径、window 就是颜色这些设置，tabBar是底部导航，这些都在微信小程序中

{
  "pages": [
    "pages/login/main",
    "pages/book/main",
    "pages/me/main",
    "pages/comment/main",
    "pages/regist/main"
  ],
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#EA5149",
        "navigationBarTitleText": "沁墨冰心书屋",
        "navigationBarTextStyle":"black"
    },
    "tabBar": {
        "selectedColor":"#EA5149",
        "list":[
            {
                "pagePath": "pages/book/main",
                "text": "图书",
                "iconPath":"static/img/book.png",
                "selectedIconPath":"static/img/book-active.png" 
            },
            {
                "pagePath": "pages/me/main",
                "text": "我",
                "iconPath":"static/img/me.png",
                "selectedIconPath":"static/img/me-active.png"

            }
        ]
    }
}

其他都是main.js 和App.vue都是一样的

//main.js文件 

import Vue from 'vue'
import App from './App'

Vue.config.productionTip=false

const app =new Vue(App)
app.$mount()

export default {
    
    
  }

//App.vue文件
<script>
import res from './pages/utils/util'
// import config from './config'
export default {
     created(){
        // const res=await get('/admins/login')
        // console.log(123,res)
        // wx.request({
        //     url:config.host+'/admins/login',
        //     success:function(res){
        //         console.log(res)
        //     }
        // })

        console.log('小程序启动了')
    }
}
</script>

<style>

</style>

然后我们创一个请求的工具，

我们这里封装request请求，是 Promise封装，仔细阅读，

请求用的微信小程序的request，封装了post和get

//工具函数库

import config from './config'


function Post(url,data){
    wx.showLoading({
        title: '加载中',
    })
    return new Promise((resolve,reject)=>{
        wx.request({
            url:config.host+url,
            method: 'Post',
            data: data,
            headers: {
              'content-type': 'application/json' // 默认值
            },
            success:function(res){
                wx.hideLoading();
                if(res.statusCode==200){
                    resolve(res.data)
                }else{
                    reject(res.data)
                }
            }
        })
    })
}

function Get(url){
    wx.showLoading({
        title: '加载中',
    })
    return new Promise((resolve,reject)=>{
        wx.request({
            url:config.host+url,
            method: 'Get',
            headers: {
              'content-type': 'application/json' // 默认值
            },
            success:function(res){
                wx.hideLoading();
                // console.log(res);
                if(res.statusCode ==200){
                    console.log(res.data)
                    resolve(res.data);
                    // return res.data.data;
                }else{
                    reject(res.data)
                }
            }
        })
    })
}

export default{
    Post,
    Get
}

然后我们接下来是登录注册的功能，如果这里学过vue 就应该很清楚，@click就是一个点击事件，而点击事件，需要在new Vue实例化中的methods中声明方法，这里注意一个小坑，就是跳转，首先不能跳转的是底部导航的地址，如果你要跳转到底部导航，那么你要使用

let url="../me/main";

wx.switchTab({url})

wsitchTab进行跳转，微信小程序官方文档已经提到，注意看文档

<template>

    <div>
        <div>
            <image class="login-img" src="../../static/img/dsp.jpg"/>
        </div>
        <div class="inputView">
            <image class="keyImage" src="../../static/img/username.png"/>
            <label class="loginLabel">账户</label>
            <input type="text" v-model="username" class="inputText" placeholder="输入用户名" />
        </div>
        <div class="line"></div>
        <div class="inputView">
            <image class="keyImage" src="../../static/img/password.png"/>
            <label class="loginLabel">密码</label>
            <input type="password" v-model="password" class="inputText" placeholder="输入密码" />
        </div> 

        <div>
            
            <button class="goLoginBtn" type="warn" @click="submit">登录</button>
            <button class="goLoginBtn" type="warn" @click="regist">注册</button>
            
        </div>
        
    </div>    
</template>

<script>
import req from '../utils/util'
export default {
    data(){
        return {
            username:'',
            password:''
        }
    },
    methods:{
        async submit(){
            if(this.username =='' || this.password == ''){
                wx.showToast({
                    title: '用户和密码不能为空',
                    icon: 'none',
                    duration: 3000
                })
            }

            console.log(this.username);
            console.log(this.password);
            const res=await req.Post("login",{username:this.username,password:this.password});//这是吧输入的用户名和密码提交到后端的接口上，进行校验，密码是否登录 ，如果正确，进行跳转，这里 要声明 async 和 await 因为是异步请求
            let url="../me/main";
            wx.switchTab({url})
        },
        regist(){
            let url='../regist/main';
            wx.navigateTo({url})
        }
    }
}
</script>

<style>
.line {
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}
.keyImage {
    margin-left: 22px;
    width: 20px;
    height: 20px;
}
.inputView {
    background-color: white;
    line-height: 45px;
}
.loginLabel {
    margin: 15px 15px 15px 10px;
    color: gray;
    font-size: 15px;
}
.inputText {
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}
.loginBtn {
    width: 80%;
    margin-top: 35px;
}

.goRegistBtn {
    width: 80%;
    margin-top: 15px;
}
</style>

我们看下后端java的代码登录注册的代码

如果需要看业务层和数据层代码去github下载源码看看

package com.binglian.controller;

import java.util.Date;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.binglian.pojo.User;
import com.binglian.pojo.VO.UserVO;
import com.binglian.service.UserService;
import com.binglian.utils.BinglianJSONResult;
import com.binglian.utils.MD5Utils;

@RestController
public class UserController {

	@Autowired
	private UserService userService;

	@PostMapping("/regist")
	public BinglianJSONResult regist(@RequestBody User user) throws Exception{
		String password=user.getPassword();
		if(StringUtils.isBlank(user.getUsername())
				||StringUtils.isBlank(user.getPassword())){
			return BinglianJSONResult.ok("用户和密码不能为空");
		}
		
		//判断是否存在用户
		User result=userService.queryName(user.getUsername());
		
		if(result == null){
			userService.addUser(user);
		}else{
			return BinglianJSONResult.errorMsg("用户已存在");
		}
		
		UserVO userVO=new UserVO();
		BeanUtils.copyProperties(user, userVO);
		return BinglianJSONResult.ok(userVO);
	}
	
	@PostMapping("/login")
	public BinglianJSONResult login(@RequestBody User user) throws Exception {
		//判断账户和密码是否为空
		if(StringUtils.isBlank(user.getUsername()) ||
				StringUtils.isBlank(user.getPassword())){
			return BinglianJSONResult.errorMsg("用户和密码不能为空");
		}
		
		//判断是否存在用户
		User usernameIsExist=userService.queryName(user.getUsername());
		User Result=null;
		if(usernameIsExist !=null){
			Result=userService.queryForLogin(user.getUsername(), MD5Utils.getMD5Str(user.getPassword()));
			if(Result == null){
				return BinglianJSONResult.errorMsg("用户或密码不正确");
			}
		}
		UserVO userVO=new UserVO();
		BeanUtils.copyProperties(Result, userVO);
		return BinglianJSONResult.ok(userVO);
	}
}

现在我们看下列表渲染，

思路就是，从后端的list数据，然后使用mpvue列表渲染，吧数据显示在小程序，这个列表渲染，mpvue也有详细资料

声明周期，也要仔细看看

<template>
    <div class="inputView">
        <!--../../static/img/password.png-->
        
        <block :key="index" v-for="(item,index) in row">
            <image class="keyImage" src="../../static/img/password.png"/>
            <p class="priht">{{item.bookTitle}}：《{{item.bookAuthor}}》</p>
            <br>
        </block>
    </div>
    
</template>

<script>
import req from "../utils/util"
export default {
    data(){
        return {
            page:'',
            records:'',
            row:[],
            bigDataLists:''
        }
    },
    async created(){
        let res=await req.Get("book/list")
        console.log(res)
        
        this.row=res.rows
        this.page=res.page
        console.log(this.page)
        console.log(this.row)
        // console.log(res.rows[0].bookAuthor)
        console.log(res.rows[1].bookAuthor)
        
   }
   
}
</script>

<style>
.inputView {
    background-color: white;
    line-height: 45px;
    height: 100px;
}
.priht{
    
    margin-left: 150px;
    margin-top: -100px
}
.keyImage {
    margin-left: 22px;
    width:60px;
    height: 100px;
}
</style>

<p class="priht">{{item.bookTitle}}：《{{item.bookAuthor}}》</p>

<br>

</block>

这里要注意下，mpvue 必须加上:key 但vue 不加这里要注意一下

如果要全部代码在最上面的github里面下，是一个小项目。随意写的。如果觉得好可以给个star