项目环境搭建

系统采用符合J2EE技术规范的多层架构，客户端使用浏览器。整个系统运行与应用服务器之上，利用应用中间件支撑系统的运行，数据库管理系统使用MySQL，应用中间件使用Tomcat。

服务器端：

系统架构：J2EE

开发工具：IDEA

数据库：MySQL

开发技术：java，mybaits,Spring Boot,sql

中间件：Tomcat，jdk1.8

客户端：

开发工具：VScode

开发技术：Vue,Element-ui,node,npm

环境要求：

服务器：

CPU：1GHZ以上

内存：2GB以上

客户端：

CPU:1GHZ以上

内存：2GB以上

一、先搭建vue环境

---

1. 去官网下载Nodejs，如果希望稳定的开发环境则下LTS
   https://nodejs.org/en/download/
2. 安装好后win+r输入node -v查询是否安装成功，如下出现版本号即为成功

     

    3.高版本的nodejs自带npm，则不必再下载，查询命令npm -v

         

     4.安装镜像，以淘宝镜像为例子
         cmd -> npm install -g cnpm --registry=http://registry.npm.taobao.org

     5. 全局安装vue脚手架
        cmd -> npm install --g vue -cli

      6.新建一个vue项目

       

        然后按照提示输入即可，如下：

   7.启动后访问，进入test-vue项目中执行npm run dev启动，如下图访问http://localhost:8081即可，因为8080端口已经呗使用，所以会自动使用下一个8081

二、vscode中整合vue

---

1.下载vscode：vscode官网

2.默认情况下， VS code是使用英文的， 有需要的话， 可以修改为中文：

    按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"

将原先的：

修改为：

修改并保存后， 会提示安装语言包， 安装即可

3.打开一个.vue的文件时， 会提示推荐安装vetur插件。安装成功后，会提示重启vscode

4.eslint

此时打开一个vue文件并编辑， 保存时并不会自动进行格式化， 这里还需要安装一些依赖和一些配置。

首先需要安装eslint

> npm install -g eslint

安装好eslint插件后， 执行vscode如下命令：

 完成后， 会在当前工程目录下生成一个 .eslintrc.json文件

5.vs code中配置eslint保存时自动格式化

具体配置如下：

{
    "files.autoSave": "off",
    "files.autoSaveDelay": 1000,
    "team.showWelcomeMessage": false,
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },    
      "javascriptreact",
      "html",
      "vue"
  ],
  "eslint.options": {
      "plugins": ["html"]
  },
     //为了符合eslint的两个空格间隔原则
    "editor.tabSize": 2,
    "eslint.enable": true
}

6.集成elementui

安装完nodejs的所有，能正常运行整个项目后，将element集成到项目中的步骤如下：
1.在cmd命令行进入到项目根目录输入cnpm i element-ui -S

2.安装完成之后，package.json文件会增加element-ui依赖

3.在main.js中即可使用elementui组件库

---

三.IDEA中springboot

---

1.File->new->project；

2.选择“Spring Initializr”，点击next；（jdk1.8默认即可）

3.完善项目信息，组名可不做修改，项目名可做修改；最终建的项目名为：test，src->main->java下包名会是：com->example->test；点击next；

4.Web下勾选Spring Web Start；SQL勾选：MySQL Driver，JDBC API 和 MyBatis Framework三项；点击next；

5.选择项目路径，点击finish；打开新的窗口；

6.刚创建好的项目目录结构

7.点击右侧的Maven，点击设置（扳手图标）进行项目Maven仓库的配置；

8.（1）选择本地Maven路径；（2）勾选配置文件后边的选项，然后修改为本地Maven的配置文件，它会根据配置文件直接找到本地仓库位置；

9.配置完后，如果没有自动导包，可以点击左上角重新导包按钮，或者下载按钮，选择下载所有源文件和文档

10.在templates文件下新建index.html页面，作为启动的初始页面；

11.在com.example.test下新建controller文件夹，在controller文件夹下建一个简单的helloController类；（Controller类要添加@Controller注解，项目启动时，SpringBoot会自动扫描加载Controller）

12.在resources文件夹下application中先配置DataSource基本信息，application文件有两种文件格式，一种是以.properties为后缀，一种是以.yml为后缀的

13.运行项目启动类TestApplication.java

14.在浏览器中输入localhost:8080,回车显示初始的index界面；到这项目的初步搭建已经完成。