java前后端分离技术

1 . SSM(掌握) -- 没有问题

(1) ssm -->springmvc+spring+mybatis

maven+ssm

(2)步骤:

a)导入pom.xml 加入依赖 -- 注意:把网络开启

b)配置

web.xml

applicationContext.xml

applicationContext-mvc.xml

db.properites

c)项目结构

d)测试

 

2. maven多模块搭建(重点掌握)

2.1 为什么要搭建多模块?

2.2 搭建多模块

 

2.3 代码放的位置:

basic_core: basedomain baseService baseMapper baseServiceImpl

basic_util: ajaxResult pageList

crm_comomon: department departmentQuery

crm_mapper: DepartmentMapper.java

crm_service:IDepartmentService DepartmentServiceImpl

crm_web: DepartmentController

2.4 引用关系:

crm_web -->crm_service

crm_service-->crm_mapper

crm_mapper-->crm_common

crm_common-->basic_core

basic_core->basic_util

 

注意:不要循环引用

2.5 配置文件

web.xml -->crm_web

applicationContext-mvc.xml-->crm_web

applicationContext.xml -->crm_service

db.properties-->crm_service/crm_mapper

 

2.6 导入jar包关系

crm_parent: 公共的spring的包

crm_web: spring-web spring-webmvc

crm_service: 引用crm_mapper

crm_mapper: mybatis dbcp 等

 

2.7 常见问题

(1)jar容易下载不下来

把仓库历史记录删除掉 重新下

把其他同学或者我仓库拷贝下拉

(2)配置文件 包名 --配置正确

(3)把搭建项目下载下来 直接对着一下

 

 

2.8 写代码的时候,尽量的满足下面的要求

(1) 开闭原则:

对扩展开发

对修改关闭 -- 一些公共的内容

(2) 低耦合 高内聚

低耦合: 模块和模块直接,类和类之间 耦合度要低

高内聚: 指的类里面的方法,它应该达到高内聚的效率

save -->保存的使用 代码30-40行

 

3 restfull风格(理解)

(1)为什么restfull风格

以前我们在发送的请求 常用 get/post, 但是现在发送请求,就要增加 delete/put/options

以前发送请求:

删除: get(post) /deleteProduct?id=1 (动作+资源在一起)

现在删除: --restfull的风格 好处:不会暴露资源

delete(动作) (/product/1 资源) -->动作+资源

 

前后端分离的项目:

采用restful的风格来交互,使用json来传递数据

(2)什么叫restfull风格

restful风格它是http协议扩展 是以资源为核心,通过url定位资源,通过不同请求方式表示操作.(PUT-add,POST-update,DELET-del,GET-获取或查询,PATCH,HEAD,OPTION)

 

put -- 新增 (修改)

post --修改(新增)

get --查询

delete --删除

patch --查询

head --头信息(不用)

 

使用restfull写法:(掌握)

@Controller
@RequestMapping("/department")
public class DepartmentController {
​
    @Autowired
    private IDepartmentService departmentService;
​
    @RequestMapping(value="/list",method= RequestMethod.PATCH)
    @ResponseBody
    public List<Department> list(){
        return departmentService.findAll();
    }
​
    //新增
    // {name:xxx}
    @RequestMapping(value="/save",method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult save(@RequestBody  Department department){
        System.out.println("新增数据");
        System.out.println(department);
        return new AjaxResult();
    }
​
    @RequestMapping(value="/update",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody  Department department){
        System.out.println("修改数据");
        System.out.println(department);
        return new AjaxResult();
    }
​
    // /department/delete/1
    @RequestMapping(value="/delete/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable("id") Long id){
        System.out.println("删除数据");
        System.out.println("删除的id:"+id);
        return new AjaxResult();
    }
​
    // /department/delete/1
    @RequestMapping(value="/query/{id}",method = RequestMethod.GET)
    @ResponseBody
    public AjaxResult queryOne(@PathVariable("id") Long id){
        System.out.println("查询数据");
        System.out.println("查询的id:"+id);
        return new AjaxResult();
    }
​
​
​
}

 

 

4 swagger用法(了解)

swagger:可以根据controller生成接口文档

(1) 导入jar包

<!--swagger配置-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>${springfox.version}</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>${springfox.version}</version>
        </dependency>

(2)写一个配置类

扫描controller 生成文档

​

@Configuration   //相当于写了spring配置 applicationContext.xml
@EnableWebMvc   //开启webmvc
@EnableSwagger2 //开启swagger
//扫描个包下面controller来生成接口描述
@ComponentScan(basePackages="cn.itsource.crm.web.controller")
public class SwaggerConfig {
​
    //<bean class=""></bean>
    @Bean
    public Docket api(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(this.apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("cn.itsource.crm.web.controller"))
                .paths(PathSelectors.any())
                .build();
    }
    
​
    //描述信息
    private ApiInfo apiInfo(){
         @SuppressWarnings("deprecation")
        ApiInfo info=new ApiInfo(
                 "itsource20190924crud测试",
                 "一个完成crud",
                 "v1",
                 "http://www.itsource.cn",
                 "zytest",
                 "apache",
                 "http://www.itsource.cn");
         return info;
    }
}

(3)扫描的配置

 <context:component-scan base-package="cn.itsource.crm.web.config"/>

(4)启动测试

http://localhost/swagger-ui.html

 

5 postman(掌握)

 

6 vue-admin-master模块(掌握)

 

(1)下载 安装

npm install

npm run dev

 

node-saas安装 --解决方案:

a) npm install -g node-gyp

b) npm uninstall node-sass

c)npm install node-sass