CRM系统搭建

最新推荐文章于 2023-01-05 16:20:27 发布
最新推荐文章于 2023-01-05 16:20:27 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45546279/article/details/103432099
版权

1. 后端crud实现

1.1 restfull风格

Restfull是http协议的扩展,它以资源为核心,通过url定位资源,以http协议不同请求方式表示操作(PUT,POST,GET,DELETE,PATCH,HEAD,OPTION)

(1)添加:
PUT /employee @RequestBody

(2) 删除:
DELETE /employee/id RequestMapping(value=”{id}”) @PathVirable(“id”) Long id

(3)修改:
POST /employee/id RequestMapping(value=”{id}”) @PathVirable(“id”) Long id @RequestBody

(4)查询一个:
GET /employee/id RequestMapping(value=”{id}”) @PathVirable(“id”)

(5)批量查询
PATCH/employee

(6)高级查询
GET /employee

1.2 后端接口实现

1.2.1 Base继承结构

在这里插入图片描述 crm_common: 自己domain继承BaseDomain
crm_mapper: 自己Mapper.java继承与BaseMapper 自己的Mapper.xml
由于Mapper.java继承了BaseMapper 的基础方法,所以不要忘记了在Mapper.xml里面忘记了写对应的映射语句
crm_service:自己IServie继承与IbaseService的基础接口方法,自己ServiceImpl基于BaseServiceImpl,里面实现基础接口实现.

1.2.2 Mapper.java&Mapper.xml

Usermapper:

public interface UsersMapper extends BaseMapper<Users> {
}

Mapper.xml:

<mapper namespace="cn.itsource.crm.mapper.UsersMapper">
    <select id="queryAll" resultType="Users">
        select * from t_users
    </select>
    <select id="queryOne" parameterType="long" resultType="Users">
        select * from t_users where id=#{id}
    </select>
    <insert id="save" parameterType="Users">
        insert into t_users(name,age) values(#{name},#{age})
    </insert>
    <update id="update" parameterType="Users">
        update t_users set name=#{name},age=#{age} where id=#{id}
    </update>
    <delete id="delete" parameterType="long">
        delete from t_users where id=#{id}
    </delete>
</mapper>

1.2.3 IxxxService.java XxxServiceImpl.java

UsersServiceImpl :

package cn.itsource.crm.service.impl;

import cn.itsource.basic.core.service.impl.BaseServiceImpl;
import cn.itsource.crm.common.domain.Users;
import cn.itsource.crm.service.IUsersService;
import org.springframework.stereotype.Service;

@Service
public class UsersServiceImpl extends BaseServiceImpl<Users> implements IUsersService  {
}

IUsersService :

package cn.itsource.crm.service;

import cn.itsource.basic.core.service.IBaseService;
import cn.itsource.crm.common.domain.Users;

public interface IUsersService extends IBaseService<Users> {

}

1.2.4 controller

@Controller
@RequestMapping("/users")
@CrossOrigin//解决跨域问题，spring需要4.2.5以上的版本
public class UsersController {

    @Autowired
    private IUsersService usersService;

    //查询全部数据
    @ResponseBody
    @RequestMapping(method = RequestMethod.PATCH)
    public List<Users> list(){
        return usersService.queryAll();
    }

    //保存方法
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult save(@RequestBody Users users){
        AjaxResult ajaxResult = new AjaxResult();
        usersService.save(users);
        return ajaxResult;
    }

    //修改方法
    @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Users users){
        AjaxResult ajaxResult = new AjaxResult();
        usersService.update(users);
        return ajaxResult;
    }

    //删除方法
    @RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable Long id){
        AjaxResult ajaxResult = new AjaxResult();
        usersService.delete(id);
        return ajaxResult;
    }

    //根据id查询数据
    @RequestMapping(value = "/{id}",method = RequestMethod.GET)
    @ResponseBody
    public Users queryOne(@PathVariable Long id){
        return usersService.queryOne(id);
    }
}

2 前端crud

2.1 准备前端项目

解压
在这里插入图片描述
改名:
在这里插入图片描述
导入
在这里插入图片描述

2.2 运行前端项目

npm install 安装依赖前端js库
npm run dev 运行前端项目
npm run build 打包,发布时候使用

2.3 写一个vue文件

copy table

2.4 导入vue组件组件及配置路由

在这里插入图片描述

2.5 实现crud

注意：
(1)关闭mock：
在这里插入图片描述(2)注释登录
在这里插入图片描述(3)直接访问
http://localhost:8080/#/department

2.6 完整crud代码

<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="getUsers">查询</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" :row-class-name="tableRowClassName" height="600"
                  @selection-change="selsChange" border style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="姓名" sortable>
			</el-table-column>
			<el-table-column prop="age" label="年龄" 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-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-item label="年龄">
					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
				</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-item label="年龄">
					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
				</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>
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                users: [],
                total: 100,
                page: 1,
                listLoading: false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                editForm: {
                    id: 0,
                    name: '',
                    age: 0
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //新增界面数据
                addForm: {
                    name: '',
                    age: 0
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    age: 0
                };
            },
            //新增
            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('/users', para).then(res => {
                                this.addLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.getUsers();
                            });
                        });
                    }
                });
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            this.$http.post('/users', para).then(res => {
                                this.editLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.editFormVisible = false;
                                this.getUsers();
                            });
                        });
                    }
                });
            },
            //处理分页
            handleCurrentChange(val) {
                this.page = val;
                this.getUsers();
            },
            //获取用户列表
            getUsers() {
                let para = {
                    page: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;
                this.$http.patch('/users').then(res => {
                    console.log(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();
                    this.$http.delete('/users/' + row.id).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            this.getUsers();
        }
    }
</script>
<style scoped>
</style>

3 跨域问题

3.1 什么是跨域

跨域是值跨域名.域名:记忆网络电脑ip很难记,就给它取了一个名字来记忆,这个名字就要域名,域名最终要被转换为ip.
一个系统访问另一个系统才会存在跨域,同系统访问不存在跨.

跨域原因说明示例
域名不同www.jd.com 与 www.taobao.com
域名相同，端口不同www.jd.com:8080 与 www.jd.com:8081
二级域名不同item.jd.com 与 miaosha.jd.com
www.baidu.wenku.comwww.baid.tieba.com

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
www.jd.com/item
www.jd.com/goods
只要域名（ip）和端口号有一样不同，那么都是跨域
http://localhost:8080 前端系统 发送Ajax取后端系统获取数据
http://localhost:80 后端系统

3.2 跨域问题

跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。因此：跨域问题 是针对ajax的一种限制。但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

3.3 跨域解决方案

3.3.1 Jsonp-- json变种

利用script或者img这种标签的特点 --jsonp方法

`<sccipt src=”http:/wwww/ssss”>`

缺点：
（1）需要服务的支持
（2） 只能发起GET请求

3.3.2 nginx反向代理

利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰

3.3.3 CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
原理:浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。
(1)简单请求
只要同时满足以下两大条件，就属于简单请求。：
（1) 请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

（2）HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.
    在这里插入图片描述Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。如果服务器允许跨域，需要在返回的响应头中携带下面信息：
    在这里插入图片描述- Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意
  • Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

(2)特殊请求
不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。
预检请求
特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
与简单请求相比，除了Origin以外，多了两个头：

  • Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
  • Access-Control-Request-Headers：会额外用到的头信息
    在这里插入图片描述

3.3.4 跨域解决方案实现

注解支持

 <!-- spring版本号 -->
        <spring.version>4.2.5.RELEASE</spring.version>

在这里插入图片描述

4 Idea集成svn插件

4.1 下载svn客户端

首先我们需要下载一个 svn的客户端
我们用的是TortoiseSVN(小乌龟)，下载后安装 ，然后记住安装路径
官网下载地址：https://tortoisesvn.net/downloads.html

4.2 安装svn客户端

在安装svn客户端的时候一定要勾选，否则在idea上集成svn的时候会找不到 svn.exe 而报错
在这里插入图片描述

4.3 配置idea的svn插件

安装好svn客户端后，想启用idea的SVN插件还需要在idea配置一下，file - setting 按钮打开设置界面 或者（Ctrl + Alt + S）快捷键 ，如下图所示：
在这里插入图片描述配置好后重启Idea

4.4 Idea使用svn插件

在这里插入图片描述

4.5 从svn库中检出项目

在这里插入图片描述输入公司的svn的地址check 出你想要的项目，就OK了
在这里插入图片描述

4.6 上传代码

选中项目中需要上传的文件和文件夹，注意，不要提交整个项目，首次提交一定要提交整个项目
在这里插入图片描述

4.7 更新代码

选中要跟新的目录和文件
在这里插入图片描述或者使用TortoiseSVN客户端进行更新
在这里插入图片描述

脚板心
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谈谈CRM系统搭建_CRM产品经理 需求规格说明书管理系统规格需求说明书模板.pdf
07-30
谈谈CRM系统搭建_CRM产品经理 需求规格说明书管理系统规格需求说明书模板.pdf
基于业务的 CRM 系统搭建（项目执行篇）_CRM产品经理 需求规格说明书管理系统规格需求说明书模板.pdf
最新发布
07-30
基于业务的 CRM 系统搭建（项目执行篇）_CRM产品经理 需求规格说明书管理系统规格需求说明书模板.pdf
搭建CRM系统管理平台
qq_41287151的博客
03-09 750
随着现代社会的快速发展，企业的发展离不开各种软件以及员工的支撑，强化管理流程，才能为企业长远发展奠定基础。企业随着时代的发展不断优化与完善，企业管理工作越来越难。新时代背景下如何运用各种软件打造数字化平台，值得每一位企业管理者思考。 搭建CRM系统管理平台 CRM（Customer Relationship Management，客户关系管理）已成为企业必要的信息化管理工具。您可以使用该工具作为一个多功能的系统来跟踪和分析客户信息、销售过程、客户服务等营销相关的数据。客户关系管理软件允许你使用少的资源来跟
BootSrap案例CRM管理系统-查询所有用户
热爱生活,热爱技术,对未知永远保持好奇!
11-09 270
查询所有用户
企业自己如何快速开发一个简单实用的CRM客户管理系统？
jdyzzy的博客
10-17 431
选择低代码平台做CRM，与其说是做大量的研究和询问大量的信息，不如说是做正确的研究和询问正确的信息。当低代码厂商能够提供更多CRM所需的一切，并在整个过程中为你提供更多支持时，你就会知道你在与合适的低代码平台合作是多么美好的一件事情。
教你如何搭建CRM—商机管理系统的demo
bby2017的博客
01-05 1293
本文将介绍，如何搭建CRM-商机管理。
灵客贯通公司CRM系统搭建与实施流程案例.docx
09-30
灵客贯通公司CRM系统搭建与实施流程案例.docx
从头搭建CRM客户管理系统
08-07
通过构建一个自定义的CRM系统，企业能够更有效地跟踪销售、市场营销和服务活动，提高客户满意度并优化业务流程。以下是对"从头搭建CRM客户管理系统"这个主题的详细说明： 一、系统架构 1. Spring Boot：Spring ...
基于SSM框架搭建的crm系统
12-21
这个"基于SSM框架搭建的crm系统"是一个完整的源代码项目，旨在帮助那些对SSM集成和CRM（客户关系管理）系统开发不熟悉的开发者。下面将详细介绍SSM框架以及CRM系统的构建。 **1. Spring框架** Spring是Java企业级...
crm客户管理系统的静态页面
09-19
这是客户关系管理系统的静态页面，包含了一些js代码，html代码，以及一些素材
crm项目框架搭建和功能设计
12-02
之前开发的crm项目，可以基于这个框架继续完善功能，减少了搭建框架的时间
crm管理系统
热门推荐
宅神的博客
07-09 1万+
CRM客户关系管理系统 CRM客户关系管理系统 客户关系管理（CRM） 作用 思维导图 用户场景分析 表结构设计 重点代码段 客户关系管理（CRM） ​ 客户关系管理（customer relationship management）的定义是：企业为提高核心竞争力，利用相应的信息技术以及互联网技术协调企业与顾客间在销售、营销和服务上的交互，从而提升其管理...
crm项目的搭建
weixin_41954142的博客
07-19 850
一、创建Maven项目 1、选择Maven下的 org.jetbrains.idea.maven.model.Maven-Archetype-webapp 2、"三板斧"坐标 GroupId:com.shsxt ArtifactId:shsxt_crm Version:1.0-SNAPSHOT 3、路径修改(相关文件资源要和自己本机存放路径相同) 4、pom修改、增删 mave...
crm项目搭建环境时，本人困惑的地方（已解决并整理）
weixin_41954142的博客
07-19 649
以下内容为个人笔记，不属于分享   1、po包下User中为何在字段后又添加 “public String toString的方法 答：为了方便调试. 可以省略 对代码执行不影响，添加后 调试传参自己能看见  2、UserInfo的意义？ 答：把要传给前台的数据整理好，放在一块；后期还会添加更大的类》resultInfo 3、service的UserService中有这样一段代码 ...
微前端在小米 CRM 系统的实践
web前端开发
04-28 278
作者 |木子朗原文 |https://www.lishuaishuai.com/architecture/1344.html大型组织的组织结构、软件架构在不断地发生变化。移动优先（...
第2章搭建CRM项目开发环境（搭建开发环境）
weixin_59334478的博客
06-29 338
2.2搭建开发环境2.2.1创建crm项目使用IDEA创建Empty Project，作为项目的工作空间2.2.2创建crm模块创建maven类型的模块，作为开发工程2.2.3为项目添加meaven依赖项目的pom.xml文件 2.2.4添加相关配置文件(1)mybatis配置mybatis-config.xml (2)配置数据连接和事务applicationContext-datasource.xml （3）springmvc配置applicationContext-mvc.xml （4）
crm虚拟服务器搭建,搭建CRM服务器
weixin_34184682的博客
08-09 495
1、在windows下安装3-windows-installer.exe软件，默认安装。手动指定安装位置。比如：d:/crm2、访问一下看看是否好用。3、进入d:/crm,拷贝D:\crm\htdocs文件夹，到linux服务器下的网站默认文件夹下：/usr/local/apache2/htdocs,改名为crm，以后就用192.168.1.23/crm虚拟目录方式来访问。4、这样网站文件就做好了...
框架练习篇（SSM）---CRM客户管理系统
Coder_Light的博客
03-09 5208
目录 开发环境 创建数据库 工程搭建 需要的jar包 整合思路 创建工程 导入jar包 加入配置文件 修改Web.xml文件 加入静态资源 结果展示 完整项目链接 开发环境 IDE： Eclipse Jdk: 1.8 数据库: MySQL 创建数据库 SQL脚本在项...
crm客户管理系统搭建
04-29
要搭建一个 CRM 客户管理系统，你需要考虑以下几个步骤： 1. 确定需求：明确你的 CRM 系统需要满足哪些功能和要求，例如客户信息管理、销售管理、营销管理、数据分析等等。 2. 选择合适的平台和技术：选择合适的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值