微信小程序——简单的售后服务单

使用工具：HBuilder X、微信开发者工具

使用框架：uniapp+uview

一、数据库设计

feedback（用于存储反馈信息）

id int 11 0 0 0 -1 0 0 0 0 0 -1 0 0
userid varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
ptype varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
descr varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
comp varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
uname varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
phone varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
ftime varchar 255 0 0 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0

pictu(用于存储图片信息)

id int 11 0 0 0 -1 0 0 0 0 0 -1 0 0
pic varchar 255 0 -1 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0
time varchar 255 0 -1 0 0 0 utf8 utf8_general_ci 0 0 0 0 0 0 0

注：因为能力有限，所以只能存储图片到本地，并未将反馈图片返回到前端，并且后台只能通过时间确定pictu与feedback是否为同一条反馈

二、后端设计（springboot）

1、新建boot项目

2、配置pom.xml文件（直接复制食用，可能有些没用的）

<properties><java.version>1.8</java.version><repackage.classifier/><spring-native.version>0.10.2</spring-native.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.experimental</groupId><artifactId>spring-native</artifactId><version>${spring-native.version}</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.2.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.5</version></dependency><!--引入druid数据源--><!-- https://mvnrepository.com/artifact/com.alibaba/druid --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.21</version></dependency><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.12</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.3</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.26</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version></dependency><dependency><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-core</artifactId><version>1.3.2</version></dependency><dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot-starter</artifactId><version>1.1.3</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></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><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-test</artifactId><version>2.1.5.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>2.3.0</version></dependency><dependency><groupId>com.sun.xml.bind</groupId><artifactId>jaxb-impl</artifactId><version>2.3.0</version></dependency><dependency><groupId>com.sun.xml.bind</groupId><artifactId>jaxb-core</artifactId><version>2.3.0</version></dependency><dependency><groupId>javax.activation</groupId><artifactId>activation</artifactId><version>1.1.1</version></dependency><!-- 自定义配置的提示 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>org.jetbrains</groupId><artifactId>annotations</artifactId><version>RELEASE</version><scope>compile</scope></dependency></dependencies><build><resources><resource><directory>src/main/java</directory><includes><include>**/*.xml</include><include>**/*.sql</include></includes><filtering>false</filtering></resource><resource><directory>src/main/resources</directory></resource></resources><plugins><!-- mvn mybatis-generator:generate --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.2</version><configuration><verbose>true</verbose><overwrite>true</overwrite><configurationFile>src/main/resources/generatorConfig.xml</configurationFile></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes><classifier>${repackage.classifier}</classifier><image><builder>paketobuildpacks/builder:tiny</builder><env><BP_NATIVE_IMAGE>true</BP_NATIVE_IMAGE></env></image></configuration></plugin><plugin><groupId>org.springframework.experimental</groupId><artifactId>spring-aot-maven-plugin</artifactId><version>${spring-native.version}</version><executions><execution><id>test-generate</id><goals><goal>test-generate</goal></goals></execution><execution><id>generate</id><goals><goal>generate</goal></goals></execution></executions></plugin></plugins></build><repositories><repository><id>spring-releases</id><name>Spring Releases</name><url>https://repo.spring.io/release</url><snapshots><enabled>false</enabled></snapshots></repository></repositories><pluginRepositories><pluginRepository><id>spring-releases</id><name>Spring Releases</name><url>https://repo.spring.io/release</url><snapshots><enabled>false</enabled></snapshots></pluginRepository></pluginRepositories><profiles><profile><id>native</id><properties><repackage.classifier>exec</repackage.classifier><native-buildtools.version>0.9.1</native-buildtools.version></properties></profile></profiles>
</project>

3、新建generatorConfig.xml（resources中，用于mybatis生成dao、mapper、domain三层）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
<generatorConfiguration><classPathEntrylocation="C:\Users\chenghao\.m2\repository\mysql\mysql-connector-java\8.0.26\mysql-connector-java-8.0.26.jar" />//这个路径是你的这个jar包的本地路径，需要自己配置<context id="context1" targetRuntime="MyBatis3"><commentGenerator><property name="suppressDate" value="true"/><property name="suppressAllComments" value="true"/><property name="addRemarkComments" value="true"/></commentGenerator><jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"connectionURL="jdbc:mysql://localhost:3306/weixintest?useSSL=false&amp; serverTimezone=Hongkong&amp; characterEncoding=utf-8&amp; autoReconnect=true"//里面的weixintest是我自己的数据库名，改成你的，下面的userID、password同样改成你的userId="root"password="root"/><javaTypeResolver ><property name="forceBigDecimals" value="false" /></javaTypeResolver><!--生成实体类 指定包名 以及生成的地址 （可以自定义地址，但是路径不存在不会自动创建  使用Maven生成在target目录下，会自动创建） --><javaModelGenerator targetPackage="com.ch.domain" targetProject="MAVEN"><property name="enableSubPackages" value="true" /><property name="trimStrings" value="true" /></javaModelGenerator><!--生成SQLMAP文件 --><sqlMapGenerator targetPackage="com.ch.mapper"  targetProject="MAVEN" ><property name="enableSubPackages" value="false" /></sqlMapGenerator><!--生成Dao文件 可以配置 type="XMLMAPPER"生成xml的dao实现  context id="DB2Tables" 修改targetRuntime="MyBatis3"  --><javaClientGenerator type="XMLMAPPER" targetPackage="com.ch.dao"  targetProject="MAVEN" ><property name="enableSubPackages" value="true" /></javaClientGenerator><table tableName="feedback" enableCountByExample="false" enableUpdateByExample="false"//tableName是数据库表的名字，生成一个之后，更改这个名字，再生成另一个enableDeleteByExample="false" enableSelectByExample="false"selectByExampleQueryId="false"></table></context>
</generatorConfiguration>

4、配置Alibaba—Druid连接池

在resources中新建application.yml，里面可能有些没用的

server:port: 8090spring:datasource:username: rootpassword: rooturl: jdbc:mysql://localhost:3306/weixintest?characterEncoding=UTF-8driver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSourceinitialSize: 5minIdle: 5maxActive: 20maxWait: 60000timeBetweenEvictionRunsMillis: 60000minEvictableIdleTimeMillis: 300000validationQuery: SELECT 1 FROM DUALtestWhileIdle: truetestOnBorrow: falsetestOnReturn: falsepoolPreparedStatements: true#配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入#如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority#则导入 log4j 依赖即可，Maven 地址： https://mvnrepository.com/artifact/log4j/log4jfilters: stat,wall,log4jmaxPoolPreparedStatementPerConnectionSize: 20useGlobalDataSourceStat: trueconnectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500mybatis:mapper-locations:- classpath:mapper/*.xml- classpath*:com/**/mapper/*.xmltype-aliases-package: com.ch.domianconfiguration:default-statement-timeout: 100

在java包中新建druid.DruidConfig配置类（这是个类）

package com.ch.druid;import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.support.http.StatViewServlet;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import javax.sql.DataSource;
import java.util.HashMap;
import java.util.Map;/*** Created by Administrator on 2018/8/20 0020.* Druid 数据源配置类*/
@Configuration
public class DruidConfig {/*** 将自定义的 Druid 数据源添加到容器中，不再让 Spring Boot 自动创建* 这样做的目的是：绑定全局配置文件中的 druid 数据源属性到 com.alibaba.druid.pool.DruidDataSource* 从而让它们生效** @return* @ConfigurationProperties(prefix = "spring.datasource")：作用就是将 全局配置文件中 前缀为 spring.datasource* 的属性值注入到 com.alibaba.druid.pool.DruidDataSource 的同名参数中*/@ConfigurationProperties(prefix = "spring.datasource")@Beanpublic DataSource druidDataSource() {return new DruidDataSource();}/*** 配置 Druid 监控 之  管理后台的 Servlet* 内置 Servler 容器时没有web.xml 文件，所以使用 Spring Boot 的注册 Servlet 方式*/@Beanpublic ServletRegistrationBean statViewServlet() {ServletRegistrationBean bean = new ServletRegistrationBean(new StatViewServlet(),"/druid/*");/*** loginUsername：Druid 后台管理界面的登录账号* loginPassword：Druid 后台管理界面的登录密码* allow：Druid 后台允许谁可以访问*      initParams.put("allow", "localhost")：表示只有本机可以访问*      initParams.put("allow", "")：为空或者为null时，表示允许所有访问* deny：Druid 后台拒绝谁访问*      initParams.put("deny", "192.168.1.20");表示禁止此ip访问*/Map<String, String> initParams = new HashMap<>();initParams.put("loginUsername", "admin");initParams.put("loginPassword", "123456");initParams.put("allow", "");/*initParams.put("deny", "192.168.1.20");*//** 设置初始化参数*/bean.setInitParameters(initParams);return bean;}
}

5、service层书写（只写自己要用的方法，我写了三个，不要忘记加@Service）

新建VxService接口

package com.ch.vxService;
import com.ch.domain.Feedback;
import com.ch.domain.GetFeedback;
import com.ch.domain.Pictu;
import com.ch.domain.Qcuser;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface VxService {int insert(Feedback record);int insert(Pictu record);List<GetFeedback> selectByUserId(String userid);
}

新建接口实现类

package com.ch.vxService.impl;
import com.ch.dao.FeedbackMapper;
import com.ch.dao.PictuMapper;
import com.ch.dao.QcuserMapper;
import com.ch.domain.Feedback;
import com.ch.domain.GetFeedback;
import com.ch.domain.Pictu;
import com.ch.domain.Qcuser;
import com.ch.vxService.VxService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class VxServiceImpl implements VxService {@AutowiredFeedbackMapper feedbackMapper;@AutowiredPictuMapper pictuMapper;@Overridepublic int insert(Feedback record) {feedbackMapper.insert(record);return 1;}@Overridepublic int insert(Pictu record) {pictuMapper.insert(record);return 1;}@Overridepublic List<GetFeedback> selectByUserId(String userid) {return feedbackMapper.selectByPrimaryKey(userid);}
}

6、controller层书写（我的业务逻辑写在controller层了，一般要写在Service层，我嫌麻烦没改）

package com.ch.vxController;import com.ch.domain.Feedback;
import com.ch.domain.GetFeedback;
import com.ch.domain.Pictu;
import com.ch.domain.model;
import com.ch.utils.picUtil;
import com.ch.vxService.VxService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.stereotype.Controller;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
@Controller
@RestController
@ResponseBody
@SpringBootTest
@RunWith(SpringRunner.class)
public class VxController {@AutowiredVxService vxService;SimpleDateFormat f = new SimpleDateFormat("yyyy年MM月dd日-HH点mm分");public String filePath="C:/Users/chenghao/Desktop/test/"; //定义上传文件的存放位置
//    @Test
//    public void t(){
//        SimpleDateFormat f = new SimpleDateFormat("yyyy年MM月dd日-HH点mm分");
//        System.out.println(f.format(new Date()));
//    }@ResponseBody@PostMapping(value = "/fb")public String putfb(@RequestBody model m){SimpleDateFormat f = new SimpleDateFormat("yyyy年MM月dd日-HH点mm分");Feedback feedback = new Feedback();feedback.setUserid(m.getUserid());feedback.setPtype(m.getPtype());feedback.setDescr(m.getIntro());feedback.setComp(m.getCompany());feedback.setUname(m.getContacts());feedback.setPhone(m.getPhone());feedback.setFtime(f.format(new Date()));vxService.insert(feedback);return feedback.toString();}@ResponseBody@PostMapping(value = "/pic")@CrossOriginpublic String putpic(@RequestParam("file") MultipartFile file){if ((file.getOriginalFilename().isEmpty())) {return "插入失败";} else {Pictu pictu = new Pictu();String fileName = file.getOriginalFilename();String fileAddress = filePath + fileName;try {picUtil.uploadFile(file.getBytes(), filePath, fileName);System.out.println(filePath);pictu.setUserid(1);pictu.setPic(fileAddress);pictu.setTime(f.format(new Date()));vxService.insert(pictu);} catch (Exception e) {e.printStackTrace();} finally {return "插入成功";}}}@ResponseBody@GetMapping(value = "/gfb")public List<GetFeedback> getFeedback(String id) {return vxService.selectByUserId(id);}
}

7、新建utils.picUtil工具类（用于接收并存储前端发送的图片）

package com.ch.utils;
import java.io.File;
import java.io.FileOutputStream;
public class picUtil {//上传文件的工具类public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {File targetFile = new File(filePath);if(!targetFile.exists()){targetFile.mkdirs();}FileOutputStream out = new FileOutputStream(filePath+fileName);out.write(file);out.flush();out.close();}
}

8、新建config.CorsConfig配置类（前后端传值可能存在跨域问题）

package com.ch.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configurationpublic
class CorsConfig implements WebMvcConfigurer {
@Override   public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")                //大坑                .allowedOriginPatterns("*")                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")                .maxAge(3600)                .allowCredentials(true);   }}

9、新建model类（用于接收前端发来的Json格式，model类包含的属性与前端定义的相同）

private String userid;
private String ptype;
private String intro;
private String company;
private String contacts;
private String phone;

10、新建GetFeedback类（用于发送前端指定信息的类，直接将此类New的对象发送上去）

private String ftime;
private String descr;

11、修改mapper.xml中的SQL语句

添加到文件头中，这个作用是设计对象所包含的属性

<resultMap id="GetResultMap" type="com.ch.domain.GetFeedback" >
<result column="descr" property="descr" jdbcType="VARCHAR" />
<result column="ftime" property="ftime" jdbcType="VARCHAR" />
</resultMap>

查询语句：

<select id="selectByPrimaryKey" resultMap="GetResultMap" parameterType="java.lang.String" >
select descr,ftime  <include refid="Base_Column_List" />
from feedback
where userid = #{id,jdbcType=VARCHAR}
</select>

12、新建log4j.properties（在resources中，不加运行时可能会报warning）

log4j.rootLogger=DEBUG, stdoutlog4j.appender.stdout=org.apache.
log4j.ConsoleAppenderlog4j.appender.stdout.layout=org.apache.
log4j.PatternLayoutlog4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

13、注解书写

dao中的mapper文件：

@Repository(value = "FeedbackMapper")
@Repository(value = "PictuMapper")

主程序中：

@SpringBootApplication
@MapperScan("com.ch.dao")

三、前端设计

不多逼逼直接四个界面代码

pages/center/index.vue

pages/index/index.vue

pages/login/test.vue

你好今天又是充满希望的一天

pages/query/myQuery.vue

pages.json

“pages”: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
“path”: “pages/login/test”,
“style”: {
“navigationBarTitleText”: “登录”
}
},
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “客户售后反馈”
}
},
{
“path”: “pages/center/index”,
“style”: {
“navigationBarTitleText”: “个人中心”
}
},
{
“path”: “pages/query/myQuery”,
“style”: {
“navigationBarTitleText”: “我的问题”
}
}
]

main.js

import Vue from ‘vue’
import App from ‘./App’
// 引入全局uView
import uView from ‘uview-ui’
import axios from ‘./utils/request/request.js’

import WXBizDataCrypt from ‘@/static/WXBizDataCrypt.js’;

//WXBizDataCrypt.js官网的工具包

Vue.use(uView);

Vue.config.productionTip = false

Vue.prototype.$axios = axios

App.mpType = ‘app’
const app = new Vue({
…App
})
app.$mount()

app.vue