项目记录之前后端代码速成

前端代码速成（Vue）

项目团队操作

1. Github导入项目
   在Github中进入项目，点击Code后，复制其URL。打开IDEA，选择Get from VCS，输入复制的URL，即可Clone项目，获取代码 。
   注意：如果Clone失败，多试几次，因为Github访问不稳定。也可以用Github客户端进行操作。
   
   
2. 新建分支wp（组长新建
   在IDEA的Terminal窗口（最下方），输入新建分支wp命令。

git checkout -b wp

3. 进入分支wp（组员进入
   右下角锁标志前面即为当前分支，点击在Remote Branches中选择origin/wp分支，选择checkout，即可进入该分支，后面每次打开项目，默认就在此分支下。
4. 获取同组成员提交的代码
   点击界面上方的Git，选择Update Project，即可获取当前分支的更新。
5. 将自己的代码修改提交
   提交前，需要先获取当前分支的更新，避免造成冲突（4）。获取成功后，在Git下选择Commit，弹出的窗口Commit Message输入自己更新的内容的文字描述，然后点击Commit and Push。
   注意：所有Git相关操作都可能因为Github不稳定失败，多试几次即可。

项目安装

1. 搭建Vue项目环境：
   在Terminal窗口输入npm install，安装项目依赖。
2. 运行Vue项目：
   在Terminal窗口输入npm run dev，运行项目。
   注意：也可能是npm run serve等，主要是看package.json文件中的"scripts"下的"vue-cli-service serve"前方的名称是什么。
3. 查看项目运行结果：
   浏览器中输入网址即可。hs_web因为存在用户登录等bug，可以访问http://localhost:9528/#/warhead/formula查看。
   

代码编写

1. 主要编写代码的路径：
   src下的router和views文件夹，在views中写具体的页面。router中写页面路由相关的配置，即定义访问views中页面的url ，views中写自己的界面，包括样式逻辑，一个页面在一个vue文件中。
2. views编写流程：
   <template></template>标签下写界面布局样式，<script></script>写界面逻辑，<style></style>补充样式。前端主要是用Element UI框架，具体使用参照其官方文档Element UI。
3. router编写流程：
   若在views中建了文件夹warhead，里面包含三个子文件夹formula、fragment和target，且这三个子文件夹中只包含index.vue一个界面。
   进入router下的index.js文件，constantRoutes数组下增加如下代码即可。如果是添加子文件到已有的目录，按层级添加，注意名称和url对应关系以及层级关系即可。

{
    path: '/warhead',
    component: Layout,
    redirect: '/warhead/formula',
    name: '毁伤评估计算',
    meta: { title: '毁伤评估计算', icon: 'el-icon-menu' },
    children: [
      {
        path: 'formula',
        name: '弹目公式计算',
        component: () => import('@/views/warhead/formula/index'),
        meta: { title: '弹目公式计算', icon: '' }
      },
      {
        path: 'fragment',
        name: '生成破片场',
        component: () => import('@/views/warhead/fragment/index'),
        meta: { title: '生成破片场', icon: '' }
      },
      {
        path: 'target',
        name: '生成目标',
        component: () => import('@/views/warhead/target/index'),
        meta: { title: '生成目标', icon: '' }
      }
    ]
  },

4. 其他功能
   一般功能在这两个文件夹下写即可，特殊功能可能需要在别的文件夹下写东西，按需百度。

后端代码速成（Java）

后端代码组成介绍

1. 框架支持
   SpringBoot(Web框架支持) + MyBatis(ORM框架) + SpringSecurity(安全) + Swagger2(文档框架)
2. 目录结构
   hs-mbg 使用MyBatis 直接从数据库生成数据库基本访问类
   hs-security 安全访问配置模板
   hs-common 通用代码模板
   hs-main 主要开发的地方，里面的目录结构已经按照 controller, service, dao进行分开，其中dao是对数据库访问的补充，在lt-mbg提供的基础查询不足的情况下，自己编码Mapper.xml和对应的类实现数据访问，具体样例可以查看lt-admin中的dao编写。
   lt-admin 一个权限管理的样例代码。
3. 代码运行
   直接使用idea打开你的项目即可，idea会自动下载依赖库文件。如果下载失败，检查maven的配置镜像。（进行maven镜像配置）如下：

<mirrors>
    <mirror>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <mirror>
        <id>alimaven</id>
        <mirrorOf>central</mirrorOf>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
    </mirror>
    <mirror>
        <id>repo2</id>
        <mirrorOf>central</mirrorOf>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://repo2.maven.org/maven2/</url>
    </mirror>
    <mirror>
        <id>ibiblio</id>
        <mirrorOf>central</mirrorOf>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://mirrors.ibiblio.org/pub/mirrors/maven2/</url>
    </mirror>
    <mirror>
        <id>jboss-public-repository-group</id>
        <mirrorOf>central</mirrorOf>
        <name>JBoss Public Repository Group</name>
        <url>http://repository.jboss.org/nexus/content/groups/public</url>
    </mirror>
    <mirror>
        <id>google-maven-central</id>
        <name>Google Maven Central</name>
        <url>https://maven-central.storage.googleapis.com
        </url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <!-- 中央仓库在中国的镜像 -->
    <mirror>
        <id>maven.net.cn</id>
        <name>oneof the central mirrors in china</name>
        <url>http://maven.net.cn/content/groups/public/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
</mirrors>

右上角选择LtMainApplication直接运行，如果运行成功。浏览器输入：http://localhost:8080/swagger-ui.html 能够访问说明启动成功。控制会显示redis错误，不用管。

这里选择Configuration。

这个错误不用管

具体编写

1. 数据库相关
   ①hs-main\src\main\java\resources\application-dev.yml中datasource下的url、username、password为mysql相关的配置，如下，根据url需要在自己mysql数据库中新建test数据库（或者别的，看?前是啥，推荐使用Navicat等数据库管理工具），username和password要改为自己的mysql用户名和密码（查看或修改mysql密码自行百度）。

url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
   username: root
   password: root

②hs-mbg 使用MyBatis 直接从数据库生成数据库基本访问类。当test数据库中新建一个表，可以运行hs-mbg\src\main\java\cn\njust\label\Generator来生成数据库基本访问类，用于对数据库增删改查：在具体操作的位置（一般为\service\impl\下的service接口实现类中）导入hs-mbg生成的三个文件（每个表三个文件）如下，具体操作对数据操作即可。

import cn.njust.label.mapper.SysLogMapper;
import cn.njust.label.model.SysLog;
import cn.njust.label.model.SysLogExample;

注意mapper需要Autowired。

@Autowired
   private SysLogMapper sysLogMapper;

当然也可以使用在hs-main\src\main\java\cn\njust\label\main\目录下的entity中新建实体类，dao中编写数据库访问，service和controller编写相应的操作，service为controller服务。

2. 编写步骤

• 在hs-main下配置好数据库相关（url,username,password）
• 新建数据表
• 在hs-mbg中生成新建表的三个文件
• 在hs-main下编写service接口，并在\service\impl编写相应的service实现类（导入hs-mbg生成的三个文件）
• 在hs-main下的controller中对每一个前端的GET/POST请求编写后端响应（注意对应service也要Autowired）
• 将后端返回值先打印到http://localhost:8080/(相应url)进行查看，正确再前后互通。