运用技术：spring、spring MVC，spring boot，mybatis，vue

一、设计数据库

根据需求和原型图，画ER关系图；然后创建数据表，形成数据库。

CREATE DATABASE shujuku DEFAULT CHARACTER SET utf8;
USE shujuku;

二、搭建框架，创建实体类

2.1 数据库引入

1.点击左上Database

2.选择页面右上+

3.选择Data Source → MySql(要运用的数据库)

java spring开发一个API服务 怎么开发一个spring项目_spring boot

2.2 创建相应的类

1.选择要使用的数据表，点击右键，选择EasyCode(多种工具根据喜好选择)→Generate Code

2.根据需求，选择entity、servi、controller等(建议就创建实体类) 

3.构建统一响应实体类respondentity

java spring开发一个API服务 怎么开发一个spring项目_css_02

 

java spring开发一个API服务 怎么开发一个spring项目_配置文件_03

java spring开发一个API服务 怎么开发一个spring项目_java_04

 

三、后端代码

1.创建controller层，为控制器，导入service层，通过接收前端传过来的参数进行业务操作。

  • @Autowired(required=false)：表示忽略当前要注入的bean，如果有直接注入，没有跳过，不会报错。

java spring开发一个API服务 怎么开发一个spring项目_配置文件_05

2.创建service层，为业务层，进行事务的管理操作。该层可以容乃多个Dao对象，方便业务的统一管理操作

MVC是web开发中常用的程序结构，mvc意为：

（1）model模型层，主要作用于数据

（2）view视图层，隶属前端，主要为页面渲染布置

（3）controller控制层，接受前端的用户传递的指令，并调用后端执行相应操作

随着互联网开发，业务越来越多，逻辑越来越复杂，为减轻开发人员的困难，将model层分为service、Dao两层层：

service负责调用Dao层，并负责业务逻辑的处理；

Dao是data access object缩写，意为数据访问对象，即直接与数据库对接。

java spring开发一个API服务 怎么开发一个spring项目_spring boot_06

3.创建serviceimpl层，负责管理实现类。

service层下分serviceimpl层，负责直接调用dao层。

即随着代码结构的提升，service层处理业务逻辑和调用dao层的功能，直接细分为不同的层级。

@Service注解：作用于类上，标记当前类是一个service类，并将当前类自动注入到spring容器中，不需要再在applicationContext.xml文件定义bean。（spring boot中减去applicationContext.xml文件，用注解代替） 

@Service
public class RbacManagerServiceImpl implements RbacManagerService {
    @Autowired
    RbacManagerDao rbacManagerDao;
    @Override
    public ResponseEntity findAll() {
        //分页
        List<RbacManager> rbacManagerList=rbacManagerDao.findAll();

        ResponseEntity<List> listResponseEntity=new ResponseEntity<>();
        listResponseEntity.setData(rbacManagerList);
        listResponseEntity.setCode(200);
        listResponseEntity.setMessage("查询成功！！!");
        return listResponseEntity;
    }
}

4.创建Dao层，负责对接数据库。

Dao层分为dao和mapper两层：

dao层负责封装对数据库的访问：增删改查的结果；

mapper层文件类型为xml，直接对数据库操作，相应的结果回返实体类，或封存数据的dto。 

java spring开发一个API服务 怎么开发一个spring项目_css_07

<mapper namespace="com.xxx.dao.RbacManagerDao">
    <select id="findAll" resultType="com.xxx.entity.RbacManager">
        select * from rbac_manager
    </select>
</mapper>

MVC架构分层的主要作用是解耦。

java spring开发一个API服务 怎么开发一个spring项目_spring boot_08

java spring开发一个API服务 怎么开发一个spring项目_spring boot_09

四、前端代码

4.1 创建vue项目

前提：安装好nodejs和vue cli。

nodejs：基于 Chrome V8 引擎的 JavaScirpt 运行环境，类似java中的jdk。

vue cli：脚手架(代码生成器)，可以快速生成基于Vue的完整前端框架，单独编译部署。可以再集成各种第三方插件，扩展出更多的功能。


创建方法：

1.通过window+r输入cmd打开dom命令窗口，输入：“cd 文件夹”命令，到达指定文件夹，输入：vue creat 项目名，即可创建vue项目

2.在VScode终端，进入指定文件夹下，输入：vue creat 项目名称，创建vue项目

3.下载相应若伊等模板，或者拿别人的vue项目，直接使用更改

4.2 配置

 主要配置后台接口域名，和请求路径的格式

注：dist和config为平级目录。

dist下存放前端资源：html页面和静态资源(css文件、js文件、image、font等，归纳static子目录)

config为配置文件夹，下面存放配置文件：index.js、prod.env.js和dev.env.js

1.index.js配置文件解析 

'use strict'  //严格模式
var path = require('path') // path是node.js的路径模块，用来处理路径统一的问题

module.exports = {
// 下面是build也就是生产编译环境下的一些配置
  build: {
// 导入prod.env.js配置文件，只要用来指定当前环境
    env: require('./prod.env'),
      
//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
    index: path.resolve(__dirname, '../dist/index.html'), //引用路径的方式和html引用图片类似，“../”就是返回上级目录
    adminIndex: path.resolve(__dirname, '../dist/admin.html'), 
      
// 下面定义的是静态资源的根目录 也就是d目录
    assetsRoot: path.resolve(__dirname, '../dist'),
      
// 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
    assetsSubDirectory: 'static',
      
// 下面定义的是静态资源的公开路径，也就是真正的引用路径
    assetsPublicPath: 'https://cdn.XXXX.cn/resource/',
      
// 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
    productionSourceMap: true,

// 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    productionGzip: false,
      
// 下面定义要压缩哪些类型的文件
    productionGzipExtensions: ['js', 'css'],

// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
    bundleAnalyzerReport: process.env.npm_config_report
  },

//前端服务器配置
  dev: {
// 引入当前目录下的dev.env.js，用来指明开发环境
    env: require('./dev.env'),
      
// 下面是dev-server的端口号，可以自行更改
    port: 443,
      
// 开发环境配置
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
      
// 下面是代理，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式
    proxyTable: {
      '/api': {     //这里最好有一个 /
          target: 'http://localhost:8080/',  // 后台接口域名
          // ws: true,        //如果要代理 websockets，配置这个参数
          // secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/api': '/'
        }
      }
    },
      
    // 各种开发服务器设置
    host: 'localhost', //可以被process.env.HOST覆盖 
    port: 8080,    // dev-server的端口号，(运行测试页面的端口 可以自行更改 )(可以被process.env覆盖)
    autoOpenBrowser: true, //是否自定代开浏览器 (项目启动后浏览器自动打开项目主页)
    errorOverlay: true, // 在浏览器是否展示错误蒙层
    notifyOnErrors: true, //是否展示错误的通知
    poll: false, // 指定webpack检查文件的方式 使用poll选项（以轮询的方式去检查文件是否改变）	
      
    //选择一种source map格式来增强调试过程
    devtool: 'cheap-module-eval-source-map',
      
    // 指定是否通过在文件名称后面添加一个查询字符串来创建source map的缓存
    cacheBusting: true,
      
    //是否开启 cssSourceMap
    cssSourceMap: true
  }
}

注意：proxyTable中配置的target和pathRewrite是组合使用。

proxyTable下'/api'作用：使用代理之前，api是标识，接口以"/api"为首才能用代理，使用代理之后就生成请求路径http://localhost:8080/api/XX;

pathRewrite中'^/api'作用：为简化请求路径省去'/api'，将其设为'/'，请求路径变为http://localhost:8080/XX;

即：'^/api'中^为拼接符，target+pathRewrite形成后台访问路径

2.prod.env.js的配置内容解析 

'use strict'  //严格模式  
    module.exports = {
        //NODE_ENV是环境变量，这里指定production环境
        NODE_ENV: '"production"'
    }

3.dev.env.js的配置内容解析 

'use strict'  //严格模式
    // 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被后者覆盖
    var merge = require('webpack-merge')
    // 导入prod.env.js配置文件
    var prodEnv = require('./prod.env')
    // 将两个配置对象合并，最终结果是 NODE_ENV: '"development"'
    module.exports = merge(prodEnv, {
        NODE_ENV: '"development"'
    })

4.3 其他文件简介（简单的不列）

java spring开发一个API服务 怎么开发一个spring项目_java_10

1.build.js：对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等

2.config：项目配置文件

3.dist：存放html页面和静态资源(css文件、js文件、image、font等，归纳static子目录)

4.node_moudles：存放nodejs配置各种包的文件夹

5.src：存放路由、各个页面、引用资源、组件等

6.babelrc：将ES6代码转换成浏览器能够识别的代码，用来兼容绝大多数的主流浏览器。

7.editorconfig：配置文件以及编码等信息，代码的规范文件、规定使用空格 缩进等代码风格

8.postcssrc.js：指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀

9.package-lock.json：当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新

10.package.json：指定项目开发和生成环境中需要使用的依赖库

4.4 路由

首先导入：import 页面名字 from '@路径'

访问路径：path

路由名字：name

调用页面：component 

/**
 * 首页
 */
//平台简介
import describe from '@/views/home/describe';
//时讯新闻
import news from '@/views/home/news';

//自定义的页面路由
  {
    path: '/index',
    name: '首页',
    component: index,
    iconCls: 'el-icon-tickets',
    children: [
      //首页-平台简介
      {
        path: '/home/describe',
        name: '平台简介',
        component: describe,
        meta: {
          requireAuth: true
        }
      },
      //首页-时讯
      {
        path: '/home/news',
        name: '实训新闻',
        component: news,
        meta: {
          requireAuth: true
        }
      },
  }

java spring开发一个API服务 怎么开发一个spring项目_spring_11

4.5 书写前端

页面效果：用html、css编排基本的效果

详细布局：用element组件，

<el-container>：外层容器。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器

<template>
    //界面样式、排列、布局
</template>

数据操作：

ES6语言：元素定义let、var、const；模板字符串；箭头函数；对象解构；传播操作符； map数组；reduce

vue基本指令：v-bind(:)；v-if；v-for；v-on(@)；v-model

请求后端数据：axios

<script>
    //数据传输
</script>