maven项目分模块开发前后端操作

最新推荐文章于 2024-03-31 22:38:28 发布
最新推荐文章于 2024-03-31 22:38:28 发布
阅读量518 收藏 1
点赞数
分类专栏： 技术点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zc96173/article/details/103436158
版权

1.后端的crud

（1）在mapper.xml中写 select  insert update delete

<mapper namespace="cn.itsource.crm.mapper.DepartmentMapper">
    <!--查询所有数据-->
    <select id="queryAll" resultType="Department">
        select * from department
    </select>
    <!--查询一条数据-->
    <select id="queryOne" parameterType="long" resultType="Department">
        select * from department where id =#{id}
    </select>
    <!--新增-->
    <insert id="save" parameterType="department">
        insert into department(name) values (#{name})
    </insert>
    <!--修改-->
    <update id="update" parameterType="department">
        update department set name=#{name} where id=#{id}
    </update>
    <!--删除-->
    <delete id="delete" parameterType="long">
        delete from department where id=#{id}
    </delete>
</mapper>

（2）控制层controller的实现
这里用了restfull风格，进行传输请求
http get/post/patch/put/delete 完成增删改查

@Controller
@RequestMapping("/department")
**//解决跨域问题
@CrossOrigin**
public class DepartmentController {
    @Autowired
    private IDepartmentService departmentService;
    @RequestMapping(value = "/list",method = RequestMethod.PATCH)
    @ResponseBody
    //查询所有数据
    public List<Department> list(){
        return departmentService.queryAll();
    }
    //新增
    //@RequestBody表示传送的是json数据
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult save(@RequestBody Department department){
        System.out.println("新增部门："+department);
        departmentService.save(department);
        return new AjaxResult();
    }
    //修改
    @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Department department){
        System.out.println("修改部门："+department);
        departmentService.update(department);
        return new AjaxResult();
    }
    //删除
    @RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    //@PathVariable接受占位符value = "/{id}"传过来的值
    public AjaxResult delete(@PathVariable Long id){
        System.out.println("删除："+id);
        departmentService.delete(id);
        return new AjaxResult();
    }
    //查询一条数据
    @RequestMapping(value = "/{id}",method = RequestMethod.GET)
    @ResponseBody
    public Department queryOne(@PathVariable Long id){
        System.out.println("查询："+id);
        return departmentService.queryOne(id);
    }
}

2.前端页面的处理

(1) 创建一个Department.vue这个页面

(2) 配置路由

 path: '/',
        component: Home,
        name: '导航一',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            { path: '/main', component: Main, name: '主页', hidden: true },
            { path: '/table', component: Table, name: 'Table' },
            { path: '/form', component: Form, name: 'Form' },
            { path: '/user', component: user, name: '列表' },
            { path: '/department', component: department, name: '部门管理' }
        ]

(3) main.js 引入axios

(4) 注释掉模拟数据
main.js中进行

/*import Mock from './mock'
Mock.bootstrap();*/
import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost/'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

(5) 修改Department.vue这里面界面

<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDepartments">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="部门" width="120" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="部门" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="部门" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	//import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	//import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

	export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                departments: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                //编辑界面数据
                editForm: {
                    id: 0,
                    name: ''

                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                //新增界面数据
                addForm: {
                    name: ''
                }

            }
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val;
                this.getDepartments();
            },
            getDepartments() {
                this.listLoading = true;
                this.$http.patch("/department/list").then(res => {
                    //传入的数据对象
                    console.debug(res);
                    this.departments = res.data;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    name: ''
                };
            },
            //新增保存
            addSubmit: function () {
                //新增前的验证
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //得到新增加的对象
                            let para = Object.assign({}, this.addForm);
                            console.log(para);
                            //axios传送数据
                            this.$http.put("/department", para).then(res => {
                                this.addLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //验证重置
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.getDepartments();
                            });
                        });
                    }
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                //row表示修改这一行的数据
                console.log(row);
                this.editFormVisible = true;
                //修改的数据放到表格中
                this.editForm = Object.assign({}, row);
            },
            //编辑保存
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            //editUser(para).then((res) => {
                            //axios传输
                                this.$http.post("/department", para).then(res => {
                                    this.editLoading = false;
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    //重置验证
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getDepartments();
                                });
                            });
                        }
                    })
                },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //para是是json对象，而字符串拼接是需要string的
                    let para = {id: row.id};
                    console.log(para);
                    //removeUser(para).then((res) => {
                    //删除进行拼接
                    this.$http.delete("/department/" + row.id).then(res => {
                        this.listLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getDepartments();
                    });
                }).catch(() => {

                });
            }
        },

            //获取用户列表
            mounted() {
                this.getDepartments();
            }
    }
</script>

<style scoped>

</style>

3前端访问后端

3.1 哪些情况下会存在跨域:(理解)

​ (1)同一个域名,不同的端口 --属于跨域 localhost:8080 --> localhost:80

(2)不同 域名  -- 属于跨域  192.168.0.1  192.168.0.2

(3) 二级域名不同 -- 属于跨域  miaosha.jd.com  --> qianggou.jd.com

3.2 跨域问题:

​ 浏览器(同源策略)针对ajax的请求, 如果访问的时候不同的域名,或者不同的端口, 存在跨域问题

​ 同源策略:只允许 相同协议 相同域名 相同的端口

3.2跨域问题的解决

(1)jsonp–很早的

​ 动态的构造的 标签

缺陷:

​ get请求/服务支持

(2)通过nginx (部署) – 解决跨域问题 – 反向代理机制

​ 类似 中间商 ,把访问后台的请求 转换访问自己, 让那个nginx去访问后台,把结果那会,在转给前台

缺点:

​ 部署服务,做配置

(3) CORS机制: 跨域资源共享"(Cross-origin resource sharing) "

​ 解决 跨域问题 (浏览器有同源策略,(相同域名,相同的端口,相同协议),如果不是同源,存在跨域问题)

​ 发送请求: 普通请求 发送一次,后台服务需要运行访问 …

​ 特殊请求 发送二次, 第一次是预检请求, 服务器也要运行预检, 前台发现预检通过,在发送真实请求

​ , 真实请求也需要服务器允许

​ 解决:都需要服务允许
方案一;
​ 注解: 版本 spring版本 4.2.5 以后才支持注解
@CrossOrigin
方案二：
创建类

package cn.itsource.crud.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1:8080/");
config.addAllowedOrigin("http://localhost:8080/");

        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

4.注意点

（1）后端分模块一定得配置好，包，版本号，配置文件，代码要一一对应
（2）前台访问后端发送请求restfull风格，注解尤其注意
（3）后端得crud
(4)前台访问后端跨域问题
a.使用注解（@CrossOrigin spring版本号改为4.2.5及以上）
b.配置相应得拦截类
（5）前台配置
1.去掉模拟数据
2.添加axios
3.配置路由
4.在相应界面进行crud

zc96173
关注
专栏目录
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
Spring MVC+Maven 实现前端和后台交互源码
12-08
这是结合博客的源码，链接是：http://blog.csdn.net/u012660464/article/details/53508757 。名为：Spring MVC+Maven 实现同一项目的前端和后台交互，该源码示例了前端和后台如何进行参数的绑定传递。
Java Web后端技术 (下) - 1.maven
weixin_43178315的博客
12-31 154
前言：这段时间在拉勾学Java，收获颇深。之前没记笔记，学习效率低很多。现在开始边学边记，用xmind思维导图的方式，每次复习都可以看到整体的框架，更加深对Java整体框架的认识。在此感谢Bob、小可及热心的同学们，学习之路不再彷徨、不再枯燥~ 本课知识点： Maven简介 Maven安装和使用 Maven生命周期和插件 IDEA创建Maven工程 Xmind笔记见png图片，没找到直接发布xmind格式的方法哈哈~ ...
javaWeb前后台交互
06-08
javaWeb前后台交互(Jsp+Servlet+mysql)；javaWeb前后台交互(Jsp+Servlet+mysql)
【Web】Maven搭建前后端连接实例
小宇宙滴Blog
07-02 1430
【Web】Maven搭建前后端连接实例前言建立Maven项目项目目录正式开始配置pom.xml配置db.properties文件applicationContext.xmlspring-mvc.xmlmapper下的UserMapper.xmlbean下的User.javadao层UserDaoservice层UserServiceImpl下的UserServiceImplcontroller层UserControllerWEB-INF下的web.xml前端页面index.jspok.jsp最终效果 前言
完整 maven项目 SSM整合步骤（先前端、后后端）
qq_49214533的博客
10-24 1501
maven项目 SSM整合步骤（先前端、后后端） 首先创建一个maven项目在pom.mxl中添加war这样项目就能达成war包了。 在main新建webapp，如果pom.xml中不加war，webapp文件夹的颜色是不一样的，只有像我这样才行，然后创建WEB-INF，web.xml 整合ssm项目前先把需要的jar包全部导入 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/P
Maven前后端的数据展示与操作项目源码.zip
11-30
该项目源码是一个基于Maven构建的前后端数据展示与操作应用，主要采用了Java后端开发、MySQL数据库存储、JDBC连接数据库以及Spring框架进行业务逻辑处理。以下将详细阐述这些技术及其在项目中的作用。 **Maven** ...
REST风格前后端分离框架（mavne分模块）
11-01
REST风格的前后端分离框架是现代Web开发中的一个重要概念，旨在提高系统的可伸缩性、灵活性和维护性。在这个框架中，"REST"代表表述性状态转移（Representational State Transfer），它是一种网络应用程序的设计风格...
在空气质量管理系统 Maven+ssm+前后端分离.rar
12-03
《构建空气质量管理系统：Maven+SSM+前后端分离详解》 在当今信息化社会，环境监测与管理变得越来越重要，特别是在空气质量方面。本系统利用现代Web技术，通过Maven、Spring、SpringMVC和Mybatis的集成（SSM框架）...
ssm+maven整合，前后端分离技术完整源码
10-31
通过前后端分离，可以实现高效的协作，提高开发效率，同时为项目提供了更好的可维护性和可扩展性。这个源码包应该包含SSM框架的配置文件、业务逻辑代码、以及相关的Maven配置，为学习和实践SSM提供了完整的参考。
使用maven管理多模块项目并启动调试-实例代码
02-18
使用maven管理多模块项目并启动调试-示例代码，博文地址： https://blog.csdn.net/u010476739/article/details/87617743
后端开发 - Maven使用总结
张念磊的博客
12-28 280
本文主要从 Maven仓库的区别和作用、Maven的生命周期、Pom.xml的书写 三个方面介绍Maven Maven简介： 通俗的讲Maven是一个非常高效的工具，让我们通过三两行配置轻松管理项目依赖，不需要以前那样下载拷贝jar包到当前文件夹这种非常不极客的方式，当然Maven能做的肯定不止...
后端修行 - Maven的安装、配置、导入、使用
Android、前端、小程序、后端
08-30 209
等会儿补全 1.检测是否安装Maven 安装成功后的操作
前后端的交互运行
最新发布
l7_804829222的博客
03-31 593
在进入这一个网页的时候，我发现，它的二维码，以及下面的四个登录方式都是不可用的。实现该页面，首先需要一张图片设置为background-image，旁边的文字，可用p标签形成段落，并用weight，high来调节高度与宽距。4.进入idea，首先配置，点击左上角，打开settings,搜索maven，修改User settings file:D:\maven\apache-maven-3.9.6\conf\settings.xml,和Local repository：(新建文件夹）二.遇到问题与解决方法。
【JavaWeb】后端(Maven+SpringBoot+HTTP+Tomcat)
qq_44544908的博客
04-12 1863
Maven是apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。Apache软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性组织。Apache Maven是一个项目管理和构建工具，它基于项目对象模型(POM，Project object model)的概念通过一小段描述信息来管理项目的构建。作用：方便的依赖管理统一的项目结构标准的项目构建流程仓库：用于存储资源，管理各种jar包。
Java后端--27--Maven入门
武天旭的博客
10-14 343
1、基本概念 1、Maven是基于项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的软件项目管理工具。 2、Maven是跨平台的项目管理工具。主要服务于基于Java平台的项目构建，依赖管理和项目信息管理。 3、Maven主要有两个功能：项目构建，依赖管理。 2、Maven的下载安装（MacOS） 1、下载地址：http://maven.apache.org/download.cgi
Maven项目:Spring MVC + Ajax + Json + RequestBody：POST后台服务器接收前端JSON数据并注解到POJO内
guochao6531的博客
08-05 2917
最近一直看Java服务器端开发，用的架构在Maven项目内的Web后台服务器，用了两天时间明白了怎么整合这些框架，很累找了很多资料，尤其在整个过程中Eclipse还时不时崩溃，正常的jsp文件都打不开，需要重新启动编译器，另外还有不断的调试。由于本人对于前端不太了解，更多时候调节一堆错误404,415这些错误真的很烦人，有时候重新启动编译器可以，但是有时候就需要查看POST的数据，而网上的大部分东西
Maven多模块项目上传至git
无忧的博客
05-09 1612
javaweb项目上传git 创建一个名为Servlet_Exam的多模块maven项目, 其中有三个子模块分别为 基础模块Servlet_pojo 基础模块Servlet_dao web模块Servlet_web 创建父模块Servlet_Exam 添加三个子模块 然后创建两个子模块分别是 Servlet_dao,基础模块Servlet_pojo添加的方式跟创建父模块一致 添加servlet_web模块 其余步骤跟上面一致,不会创建Maven的同志可以看我上一篇博客 这是这几个项目的排
maven后端到前端Web项目开发流程一阶段汇总自用--三层架构包开发
bug大师的博客
08-30 1596
maven基础开发流程mavenWeb项目的创建maven三层架构包开发 maven是做项目的基础,很重要,进行一点汇总加深记忆 mavenWeb项目的创建 maven的web项目开发首先创建一个maven项目 maven三层架构包开发 maven开发也要使用基础的三层架构包开发,使用过后的感觉就是哪里有病找哪里,很好使! ...
SpringBoot2仿B站项目：16章实战，高性能前后端+敏捷开发
2. **起步依赖**：这是SpringBoot项目的基础，起步依赖通过Maven的POM文件形式，预定义了项目所需的依赖项，简化了构建过程，确保项目具备所需功能的基础设施。 3. **辅助功能**：SpringBoot提供了内置的服务器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值