SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn

63 阅读 0 评论 42 点赞

我是靠谱客的博主美丽八宝粥，最近开发中收集的这篇文章主要介绍SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 后端crud

(1)mapper.xml 写 select insert update delete

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.itsource.crm.mapper.ProductMapper">
    <!--void save(T t);-->
    <insert id="save" parameterType="Product">
        INSERT INTO  product(name) VALUES(#{name})
    </insert>
    <!--void remove(Serializable id);-->
    <delete id="delete" parameterType="long">
        DELETE FROM product where id = #{id }
    </delete>
    <!--void update(T t);-->
    <update id="update" parameterType="Product">
        update product set name = #{name} where id = #{id}
    </update>
    <!--T findOne(Serializable id);-->
    <select id="findOne" parameterType="long" resultType="Product">
        SELECT  * from product where id = #{id}
    </select>
    <!--List<T> findAll();-->
    <select id="findAll" resultType="Product">
        select * from product
    </select>
</mapper>

(2)在对应的controller写上 crud方法

package cn.itsource.crm.web.controller;
import cn.itsource.basic.util.AjaxResult;
import cn.itsource.crm.common.domain.Product;
import cn.itsource.crm.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@Controller
@RequestMapping("/product")
@CrossOrigin
public class productController {
    @Autowired
    private IProductService productService;

    @RequestMapping("/test")
    @ResponseBody
    public List<Product> test(){
        return productService.findAll();
    }


    @CrossOrigin
    @RequestMapping(value="/list",method= RequestMethod.PATCH)
    @ResponseBody
    public List<Product> list(){
        return productService.findAll();
    }

    //新增
    // {name:xxx}
    @RequestMapping(value="/save",method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult save(@RequestBody  Product product){
        try {
            System.out.println("新增数据");
            productService.save(product);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("保存失败"+e.getMessage());
        }
        return new AjaxResult();
    }

    @RequestMapping(value="/update",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Product product){
        try {
            System.out.println("修改数据");
            productService.update(product);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("保存失败"+e.getMessage());
        }
        return new AjaxResult();
    }

    // /department/delete/1
    @RequestMapping(value="/delete/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable("id") Long id){
        try {
            System.out.println("删除的id:"+id);
            productService.delete(id);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("删除失败"+e.getMessage());
        }
        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();
    }
}

2. 前端界面处理

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

(2) 配置路由

(3) main.js 引入axios

(4) 注释掉模拟数据

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

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.3 解决跨域问题

(1)jsonp–早期办法

动态的构造的标签

缺陷:

get请求/服务支持

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

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

缺点:

部署服务,做配置

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

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

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

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

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

解决:都需要服务允许

注解: 版本 spring版本 4.2.5 以后才支持注解

@CrossOrigin

4 前端CRUD

product.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="getProducts">查询</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="users" 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 NProgress from 'nprogress'
	// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				users: [],
				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: {
			//性别显示转换
			formatSex: function (row) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
			//处理分页
			handleCurrentChange(val) {
				this.page = val;
				this.getProducts();
			},
			//获取产品列表
			getProducts() {

				this.listLoading = true;

				this.$http.patch('/product/list').then(res=>{
					//this.total = res.data.total;
					this.users = res.data;
					this.listLoading = false;

				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					// let para = { id: row.id };
					this.$http.delete('/product/delete/'+row.id).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getProducts();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				console.log(row);
				this.editForm = Object.assign({},row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					name: '',
				};
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.editForm);
							console.log(para);
							this.$http.post('/product/update',para).then(res=>{
								//关闭加载框
								this.editLoading = false;

								this.$message({
									message: '提交成功',
									type: 'success'
								});
								//关闭对话框
								this.editFormVisible = false;
								//加载列表
								this.getProducts();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							this.$http.put('/product/save',para).then(res=>{
								//关闭加载框
								this.addLoading = false;

								this.$message({
									message: '提交成功',
									type: 'success'
								});
								//验证的重置
								//this.$refs['addForm'].resetFields();
								//关闭新增对话框
								this.addFormVisible = false;
								this.getProducts();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				let ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					this.$http.delete('/product/batchDelete'+para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getProducts();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getProducts();
		}
	}

</script>

5 小乌龟 svn

svn : 代码管理工具 , 设置不同的人,有不同的权限,来查看或者修改

svn: 项目版本控制工具

svn: 一般使用团队开发 (git分布式版本控制工具)

svn: 安装 (svn服务端(公司的服务器上面) svn客户端(具体每个同事的电脑) )

svn: 上传下载

5.1 安装

(1)先安装svn server

(2)在安装svn client 小乌龟

5.2 基本的svn的操作

–新增内容

(1)创建仓库

(2)创建用户 ,组分配权限

(3)先checkout 检出仓库到本地

(4)在文件夹里面新增的文件 --先点击右键 --添加 -->commit

–更新内容

在对应的文件夹里面右键 --update 更新内容

–删除内容

先在本地文件夹里面删除内容 — 提交(svn里面内容也删除掉)

–解决冲突

什么情况下会出现冲突

多个人修改同一个文件,这个就容易出现冲突

比如 TT — >123.java 修改之后,提交到服务器

ZH -->123.java. 在修改这个文件的时候,没有更新内容,导致在不是最新代码下面去修改,在提交的时候,就产生冲突

怎么解决这个?

(1)如果zh发现冲突的时候,先更新svn代码

(2)修改对应的文件 (和其他人商量一下) -->最终形成一个版本

(3)把该文件标记成已解决

(4)再提交

最后

以上就是美丽八宝粥为你收集整理的SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn的全部内容，希望文章能够帮你解决SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：java
浏览次数：63 次浏览
发布日期：2024-10-06 23:35:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_10_f1_12__23__18_0.html

SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn

概述

1. 后端crud

2. 前端界面处理

3 前端访问后端

3.1 哪些情况下会存在跨域

3.2 跨域问题:

3.3 解决跨域问题

4 前端CRUD

5 小乌龟 svn

5.1 安装

5.2 基本的svn的操作

最后

评论列表共有 0 条评论

发表评论取消回复

SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端 访问后端4 前端CRUD5 小乌龟 svn

概述

1. 后端crud

2. 前端界面处理

3 前端 访问后端

3.1 哪些情况下会存在跨域

3.2 跨域问题:

3.3 解决跨域问题

4 前端CRUD

5 小乌龟 svn

5.1 安装

5.2 基本的svn的操作

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

SSM+ElementUI前后端分离1. 后端crud2. 前端界面处理3 前端访问后端4 前端CRUD5 小乌龟 svn

3 前端访问后端

发表评论取消回复