Uni-app front-end development | Express transportation management system based on WeChat applet

Author Homepage: Programming Compass

About the author: High-quality creator in the Java field, CSDN blog expert, CSDN content partner, invited author of Nuggets, Alibaba Cloud blog expert, 51CTO invited author, many years of architect design experience, resident lecturer of Tencent classroom

Main content: Java project, Python project, front-end project, artificial intelligence and big data, resume template, learning materials, interview question bank, technical mutual assistance

Favorites, likes, don't get lost, it's good to follow the author

Get the source code at the end of the article 

Item number: BS-XCX-018

1. Environmental introduction

Locale: Java: jdk1.8

Database: Mysql: mysql5.7

Application server: Tomcat: tomcat8.5.31

Development tools: IDEA or eclipse

Background development technology: SSM framework   

Front-end development technology: uni-app+WeChat applet+vue

2. Project introduction

2.1 Basic introduction

The rapid development of e-commerce has also led to the prosperity of China's express delivery and logistics industry. Online shopping and receiving express delivery seem to have become a small joy in people's daily life. Regarding the management of courier information, there are many software and platform systems built by courier companies in the market. For example, Alipay can query the courier information based on the logistics distribution of Cainiao Network, but it cannot query the courier packages that do not pass through Cainiao Network. Similarly, the courier information of courier companies such as STO Express and Shunfeng Express is also closed-loop query. If a customer purchases express delivered through different express platforms, it is very inconvenient to log in to multiple platforms to view the delivery information of the express. The express transportation management system based on the WeChat applet to be studied in this topic is to solve this problem.
    This set of express transportation management system based on the WeChat mini-program developed after research is mainly based on the lightweight client application of the WeChat mini-program to realize information query and management. Consumers can register and log in to the WeChat mini-program platform. Complete information query, express information query, delivery information query, etc., the express delivery staff can log in to complete the delivery of express information, query and other operations, and at the same time, the background administrator can log in to perform corresponding management operations on the information of the entire express platform.
    In terms of technology selection, the express transportation management system developed by this topic uses WeChat applet development tools to implement the front-end, and combines the VUE framework to use Nodejs to run the front-end project of the background management. The background service interface is integrated and developed using the SSM framework. The database uses MYSQL5.7 database for data storage and data relationship design. The whole system is developed and implemented by separating the front and back ends, and the human-computer interaction is in line with people's daily habits.

2.2 Demand Analysis

Based on the survey of express delivery stations and the survey and analysis of users who often shop online, it is known that the user roles of this system are divided into three categories, namely ordinary users, delivery personnel and system administrators. The following describes the functional operation of this user.

The main functional operation examples of ordinary users are shown in the figure below:

 

Figure 3-1 Common user use case diagram

Ordinary users mainly have the functions of online registration and login, platform announcement information query, personal courier information viewing, delivery information viewing, personal center management, etc.

The use case diagram for the function realization of the courier user is shown in Figure 3-2 below.

 

Figure 3-2 Use case diagram of delivery staff

The delivery staff registers and logs in to the front end of the WeChat applet, and can browse the announcement information online, check the express delivery that needs to be delivered and pick it up. After the offline delivery is completed, modify the delivery status and wait for the customer to confirm.

The functional use case diagram of the platform administrator is shown in Figure 3-3 below.

 

Figure 3-3 Administrator use case diagram

The platform administrator of the express transportation management system can manage the information of users and delivery personnel registered at the front end after logging in to the system, and at the same time manage the carousel image information and personal information released by the front end. In the user management module, you can add the courier information owned by this user. After adding, both the WeChat applet user and the courier can view it. At the same time, the administrator can manage the added courier information in the courier information management module. In the delivery information management The module manages the courier information that has been received by the courier, manages the delivered courier in the delivery courier module, and manages the completed courier information in the confirmation completion management module.

2.3 Database design

According to the above extraction and description of the database entity information, the specific table structure information is analyzed. If a professional UML tool is used for design, the specific table structure can be directly generated according to the entity diagram. The main table structure information of the system is shown below.

(1) User information table: It mainly stores the user information registered by the front end of the WeChat applet. The specific table structure information is shown in Table 3-1 below:

Table 3-1 User table (yonghu)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

addtime

Date

creation time

yes

yonghuzhanghao

String

user account

yes

mima

String

password

yes

yonghuxingming

String

username

yes

xingbie

String

gender

yes

nianling

String

age

yes

touxiang

String

avatar

yes

yonghushouji

String

user mobile phone

yes

(2) Delivery staff information table: mainly stores the delivery staff information registered at the front end of the WeChat Mini Program, and the specific table structure information is shown in Table 3-2 below:

Table 3-2 Distributor table (peisongyuan)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

addtime

Date

creation time

yes

Peisongzhanghao

String

Delivery account

yes

mima

String

password

yes

Peisongyuan

String

courier

yes

xingbie

String

gender

yes

touxiang

String

avatar

yes

Peisongyuanshouji

String

Distributor mobile phone

yes

shenfenzheng

String

ID card

yes

(3) Administrator information table: mainly stores the administrator information of the express transportation management system, and the specific table structure information is shown in Table 3-3 below:

Table 3-3 Administrators (users)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

username

String

username

yes

password

String

password

yes

role

String

Role

yes

addtime

Date

add time

yes

(4) Announcement Information Table: It mainly stores the announcement information issued by the express transportation management system. The specific table structure information is shown in Table 3-4 below:

Table 3-4 Platform announcement table ( news )

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

addtime

Date

creation time

yes

title

String

title

yes

introduction

String

Introduction

yes

picture

String

picture

yes

content

String

content

yes

(5) Express information table: mainly stores the user’s express information added by the express transportation management system. The specific table structure information is shown in Table 3-5 below:

Table 3-5 Express Information Form (kuaidixinxi)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

addtime

Date

creation time

yes

kuaididanhao

String

tracking number

yes

kuaidimingcheng

String

courier name

yes

tupian

String

picture

yes

wuliu

String

logistics

yes

yonghuzhanghao

String

user account

yes

yonghuxingming

String

username

yes

yonghushouji

String

user mobile phone

yes

fahuodi

String

Shipping place

yes

kuaidiweizhi

String

Express location

yes

gengxinshijian

datetime

update time

yes

userid

Integer

user id

yes

(6) Express Delivery Information Table: It mainly stores the user’s express delivery information added by the express transportation management system. The specific table structure information is shown in Table 3-6 below:

Table 3-6 Delivery Information Form (peisongxinxi)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

addtime

Date

creation time

yes

kuaididanhao

String

tracking number

yes

kuaidimingcheng

String

courier name

yes

tupian

String

picture

yes

yonghuzhanghao

String

user account

yes

yonghuxingming

String

username

yes

yonghushouji

String

user mobile phone

yes

kuaidiweizhi

String

Express location

yes

zhidingweizhi

String

specified location

yes

Peisongfei

String

delivery fee

yes

jiequshijian

datetime

access time

yes

Peisongzhanghao

String

Delivery account

yes

Peisongyuan

String

courier

yes

Peisongyuanshouji

String

Distributor mobile phone

yes

Peisongwuliu

String

Distribution logistics

yes

dingdanzhuangtai

String

Order Status

yes

userid

Integer

user id

yes

(7) Carousel image information table: mainly stores the carousel image information released by the express transportation management system, and the specific table structure information is shown in Table 3-7 below:

Table 3-7 Carousel map information table (config)

column name

type of data

illustrate

allow empty

Id

Int

primary key

no

name

String

Configuration parameter name

yes

value

String

Configuration parameter values

yes

Three, system display

user registration

 User login

 system notification

 Express inquiry

 express delivery

 personal center

 Background management module

User Management

Distributor Management

 

 Express information management

 Express distribution management

 

delivery completion management

Announcement management

 

 Carousel management

 

Fourth, the core code display

package com.controller;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import com.baidu.aip.util.Base64Util;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.CommonService;
import com.service.ConfigService;
import com.utils.BaiduUtil;
import com.utils.FileUtil;
import com.utils.R;
/**
 * 通用接口
 */
@RestController
public class CommonController{
	@Autowired
	private CommonService commonService;

    private static AipFace client = null;
    
    @Autowired
    private ConfigService configService;
    
	/**
	 * 获取table表中的column列表(联动接口)
	 * @param table
	 * @param column
	 * @return
	 */
	@IgnoreAuth
	@RequestMapping("/option/{tableName}/{columnName}")
	public R getOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName,String level,String parent) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("column", columnName);
		if(StringUtils.isNotBlank(level)) {
			params.put("level", level);
		}
		if(StringUtils.isNotBlank(parent)) {
			params.put("parent", parent);
		}
		List<String> data = commonService.getOption(params);
		return R.ok().put("data", data);
	}
	
	/**
	 * 根据table中的column获取单条记录
	 * @param table
	 * @param column
	 * @return
	 */
	@IgnoreAuth
	@RequestMapping("/follow/{tableName}/{columnName}")
	public R getFollowByOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, @RequestParam String columnValue) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("column", columnName);
		params.put("columnValue", columnValue);
		Map<String, Object> result = commonService.getFollowByOption(params);
		return R.ok().put("data", result);
	}
	
	/**
	 * 修改table表的sfsh状态
	 * @param table
	 * @param map
	 * @return
	 */
	@RequestMapping("/sh/{tableName}")
	public R sh(@PathVariable("tableName") String tableName, @RequestBody Map<String, Object> map) {
		map.put("table", tableName);
		commonService.sh(map);
		return R.ok();
	}
	
	/**
	 * 获取需要提醒的记录数
	 * @param tableName
	 * @param columnName
	 * @param type 1:数字 2:日期
	 * @param map
	 * @return
	 */
	@IgnoreAuth
	@RequestMapping("/remind/{tableName}/{columnName}/{type}")
	public R remindCount(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("table", tableName);
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		int count = commonService.remindCount(map);
		return R.ok().put("count", count);
	}
	
	/**
	 * 单列求和
	 */
	@IgnoreAuth
	@RequestMapping("/cal/{tableName}/{columnName}")
	public R cal(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("column", columnName);
		Map<String, Object> result = commonService.selectCal(params);
		return R.ok().put("data", result);
	}
	
	/**
	 * 分组统计
	 */
	@IgnoreAuth
	@RequestMapping("/group/{tableName}/{columnName}")
	public R group(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("column", columnName);
		List<Map<String, Object>> result = commonService.selectGroup(params);
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		for(Map<String, Object> m : result) {
			for(String k : m.keySet()) {
				if(m.get(k) instanceof Date) {
					m.put(k, sdf.format((Date)m.get(k)));
				}
			}
		}
		return R.ok().put("data", result);
	}
	
	/**
	 * (按值统计)
	 */
	@IgnoreAuth
	@RequestMapping("/value/{tableName}/{xColumnName}/{yColumnName}")
	public R value(@PathVariable("tableName") String tableName, @PathVariable("yColumnName") String yColumnName, @PathVariable("xColumnName") String xColumnName) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("xColumn", xColumnName);
		params.put("yColumn", yColumnName);
		List<Map<String, Object>> result = commonService.selectValue(params);
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		for(Map<String, Object> m : result) {
			for(String k : m.keySet()) {
				if(m.get(k) instanceof Date) {
					m.put(k, sdf.format((Date)m.get(k)));
				}
			}
		}
		return R.ok().put("data", result);
	}

	/**
 	 * (按值统计)时间统计类型
 	 */
	@IgnoreAuth
	@RequestMapping("/value/{tableName}/{xColumnName}/{yColumnName}/{timeStatType}")
	public R valueDay(@PathVariable("tableName") String tableName, @PathVariable("yColumnName") String yColumnName, @PathVariable("xColumnName") String xColumnName, @PathVariable("timeStatType") String timeStatType) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("table", tableName);
		params.put("xColumn", xColumnName);
		params.put("yColumn", yColumnName);
		params.put("timeStatType", timeStatType);
		List<Map<String, Object>> result = commonService.selectTimeStatValue(params);
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		for(Map<String, Object> m : result) {
			for(String k : m.keySet()) {
				if(m.get(k) instanceof Date) {
					m.put(k, sdf.format((Date)m.get(k)));
				}
			}
		}
		return R.ok().put("data", result);
	}

    /**
     * 人脸比对
     * 
     * @param face1 人脸1
     * @param face2 人脸2
     * @return
     */
    @RequestMapping("/matchFace")
    @IgnoreAuth
    public R matchFace(String face1, String face2,HttpServletRequest request) {
        if(client==null) {
            /*String AppID = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "AppID")).getValue();*/
            String APIKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "APIKey")).getValue();
            String SecretKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "SecretKey")).getValue();
            String token = BaiduUtil.getAuth(APIKey, SecretKey);
            if(token==null) {
                return R.error("请在配置管理中正确配置APIKey和SecretKey");
            }
            client = new AipFace(null, APIKey, SecretKey);
            client.setConnectionTimeoutInMillis(2000);
            client.setSocketTimeoutInMillis(60000);
        }
        JSONObject res = null;
        try {
            File file1 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face1);
            File file2 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face2);
            String img1 = Base64Util.encode(FileUtil.FileToByte(file1));
            String img2 = Base64Util.encode(FileUtil.FileToByte(file2));
            MatchRequest req1 = new MatchRequest(img1, "BASE64");
            MatchRequest req2 = new MatchRequest(img2, "BASE64");
            ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
            requests.add(req1);
            requests.add(req2);
            res = client.match(requests);
            System.out.println(res.get("result"));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return R.error("文件不存在");
        } catch (IOException e) {
            e.printStackTrace();
        } 
        return R.ok().put("data", com.alibaba.fastjson.JSONObject.parse(res.get("result").toString()));
    }
	
}
package com.controller;

import java.io.File;
import java.io.IOException;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;

/**
 * 上传文件映射表
 */
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
	@Autowired
    private ConfigService configService;
	/**
	 * 上传文件
	 */
	@RequestMapping("/upload")
	public R upload(@RequestParam("file") MultipartFile file, String type,HttpServletRequest request) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		String fileName = new Date().getTime()+"."+fileExt;
		File dest = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+fileName);
		file.transferTo(dest);
		/**
 		 * 如果使用idea或者eclipse重启项目,发现之前上传的图片或者文件丢失,将下面一行代码注释打开
  		 * 请将以下的"D:\\ssmpiv99\\src\\main\\webapp\\upload"替换成你本地项目的upload路径,
 		 * 并且项目路径不能存在中文、空格等特殊字符
 		 */
//		FileUtils.copyFile(dest, new File("D:\\ssmpiv99\\src\\main\\webapp\\upload"+"/"+fileName)); /**修改了路径以后请将该行最前面的//注释去掉**/
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
	
	/**
	 * 下载文件
	 */
	@IgnoreAuth
	@RequestMapping("/download")
	public void download(@RequestParam String fileName, HttpServletRequest request, HttpServletResponse response) {
		try {
			File file = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+fileName);
			if (file.exists()) {
				response.reset();
				response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName+"\"");
				response.setHeader("Cache-Control", "no-cache");
				response.setHeader("Access-Control-Allow-Credentials", "true");
				response.setContentType("application/octet-stream; charset=UTF-8");
				IOUtils.write(FileUtils.readFileToByteArray(file), response.getOutputStream());
			}

		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
}

5. Display of related works

Practical projects based on Java development, Python development, PHP development, C# development and other related language development

Front-end practical projects developed based on Nodejs, Vue and other front-end technologies

Related works based on WeChat applet and Android APP application development

Development and application of embedded IoT based on 51 single-chip microcomputer

AI intelligent application based on various algorithms

Various data management and recommendation systems based on big data

 

 

Guess you like

Origin blog.csdn.net/whirlwind526/article/details/131429869