社区疫情防控系统(springboot+vue+小程序)yqfk.zip

# 疫情防控小程序系统——前后端开发文档 ## 开发层次 - 系统后台 - 系统管理员端 - 用户小程序 ## 开发环境 - 系统后台：MYSQL8.0，JDK11，IDEA，NAVICAT - 管理员页面：VSCODE - 用户小程序：小程序开发者工具 ## 所需框架 - Springboot，Mybatis，Node.js，Vue - ElementUi，ColorUI，VantUI ## 前期开发流程 ### 后端开发 1. 快速创建spring项目：  2.  3. 勾选   4. 目录结构：  5. 数据库配置： - resource文件夹下新建application的yml文件  - ```yaml # mysql spring: datasource: #MySQL配置 driverClassName: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/bishe?useUnicode=true&characterEncoding=UTF-8&useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC username: root password: 123456 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.demo.model server: port: 9000 ``` -  - 启动项目，访问本机9000端口，出现以下提示即数据库连接成功   6. 测试Controller: - 新建Controller包，注意大写  - ```java package com.lihui.study.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; //@RestController是@ResponseBody和@Controller的组合注解。(使用@Controller 注解，在对应的方法上， //视图解析器可以解析return 的jsp,html页面，并且跳转到相应页面若返回json等内容到页面，则需要加@ResponseBody注解) @RestController public class LoginController { @RequestMapping("/test") public String test(){ return "Hello Springboot!"; } } ``` - 访问/test -  - 初步搭建成功 7. 处理跨域请求： - 新建config配置类  - ```java package com.biyesheji.bishe.util; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; //全局配置类——配置跨域请求 @Configuration public class WebConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { /** * 1.域访问路径 * 2.请求来源 * 3.方法 * 4.允许携带 * 5.生命周期 */ registry.addMapping("/**") .allowedOrigins("Http://localhost:8080","null") .allowedMethods("GET","POST","PUT","OPTIONS","DELETE") .allowCredentials(true) .maxAge(3600); } } ``` ### 管理员页面开发 1. 下载node.js并安装vue，详情可借鉴[安装教程](https://blog.csdn.net/m0_52937388/article/details/117793625?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164887576016780265449800%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164887576016780265449800&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-117793625.142^v5^pc_search_result_control_group,157^v4^control&utm_term=vue%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187) 2. 选定工作空间，建立vue工作空间，启动vue ui：  3. 进入vueui界面创建项目 - 新建vue工作空间  -  -  - 勾选：   - 选择vue2.x版本创建   - 稍作等待 - 进入界面  - 添加ElementUI插件  - 添加axios依赖  - 添加Less依赖  -  - 点击任务，点击serve，点击运行，启动app  4. 使用VsCode打开我们建立的vue项目 - 项目目录  - 清空App.vue成如下  - 防止报错，删除views文件夹下的About.vue以及Home.vue - index.js清空成如下  - - 熟悉目录结构：assets文件夹存放公共资源，components放入组件模板，plugins存放插件例如elementui,main.js是全局配置 5. main.js配置，配置router，axios ```js import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' import './assets/css/global.css' import './assets/icon_font/iconfont.css' impo