當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/9 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序——简单的售后服务单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

微信小程序——簡單的售后服務單

使用工具：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><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><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& serverTimezone=Hongkong& characterEncoding=utf-8& autoReconnect=true"//里面的weixintest是我自己的數據庫名，改成你的，下面的userID、password同樣改成你的userId="root"password="root"/><javaTypeResolver ><property name="forceBigDecimals" value="false" /></javaTypeResolver><javaModelGenerator targetPackage="com.ch.domain" targetProject="MAVEN"><property name="enableSubPackages" value="true" /><property name="trimStrings" value="true" /></javaModelGenerator><sqlMapGenerator targetPackage="com.ch.mapper" targetProject="MAVEN" ><property name="enableSubPackages" value="false" /></sqlMapGenerator><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語句

添加到文件頭中，這個作用是設計對象所包含的屬性

查詢語句：

<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

總結

以上是生活随笔為你收集整理的微信小程序——简单的售后服务单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： LCM模组的简介与质量管理（连载四）
下一篇：一个能自动搜索源文件并自动推导的Make