从0开始,构建前后端分离应用

lichking2017 lichking2017     2022-11-11     136

关键词:

最近业余时间比较充足,想开发一个小系统。作为自己的技术积累

后端使用Spring+SpringMVC+Mybatis框架、前端使用Vue+iView作为基础开发一个前后端分离的SPA应用

目录

1、环境搭建

1.1 Maven+Nexus搭建后台构建环境

1.2 webpack搭建后端构建环境

2、前端开发

 

3、后端开发

环境简介

由于是个人练习的小项目,因此开发环境设计也很简单。物理环境包括一台dbServer、一台配置服务器、一台应用服务器

服务器名称  服务器IP  操作系统  部署内容
dbServer   192.168.0.112 CentOS7 Mysql5.7
运维服务器 192.168.0.110 CentOS7 nexus3.9
appServer 192.168.0.111 CentOS7 tomcat8、redis
个人PC 192.168.0.103 MacBook Pro IDEA、WebStorm、DataGrip、MAVEN、tomcat8、VirtualBox、jdk8、Dash

基本就是这样,至于如何安装网上有大把的资料。推荐两款工具

DataGrip:作为数据库客户端工具,和以往用过的Sequel Pro、Navicat对比,它的提示功能非常强大,提供了很多提高工作效率的小功能,与IDEA同出一门,很赞!

WebStorm:同样也出自IntelliJ,前端开发利器。与它类似的还有apache出品的atom,这两款工具我都使用过。后者的定制性更强,有很多插件可以使用,但是需要花时间去研究。我比较懒因此选择了出厂就配置好的WebStorm。

技术选型

后端:

Spring+SpringMVC+MyBatis、对象序列化采用google的GSON、针对通过用的CRUD使用Mybatis的SqlBuilder进行封装

使用testNG进行单元测试

前端:

选择最近比较火热的Vue作为前端框架、使用官方推荐的iView作为UI库、路由同样使用Vue的Vue-Router、异步请求使用axios、less、es6

 

前后端分离项目从零开始

1.创建一个项目(new-project)执行npminit-y;2.借鉴了yii项目结构把basic里面的内容放到把没用的都删掉  3.开发controller目录  4.编辑app.js安装koa  npminstallkoa--save-dev--save-dev 开发模式下 ===-D--save线上模式=== 查看详情

前后端分离

一、什么是前后端分离?最开始租内讨论的过程中我们发现。每个人对前后端分离的理解不一样。为了保证能在同一个频道讨论,先就什么是"前后端分离"达成一致大家一致认同的前后端分离的例子就是SPA,所有用到的展现的数据... 查看详情

关于前后端分离与不分离

...程序员又弄前端,又弄后端。近几年,许多大中小型公司开始吧前后端的界限分的越来越明确,前端工程师只管前端的事,后端工程师只管后端的事,让两边的工程师更加专注各自的领域,独立治理。 查看详情

//……关于前后端分离与不分离

...程序员又弄前端,又弄后端。近几年,许多大中小型公司开始吧前后端的界限分的越来越明确,前端工程师只管前端的事,后端工程师只管后端的事,让两边的工程师更加专注各自的领域,独立治理。  查看详情

这个极简前后端分离应用不能错过(代码片段)

这个极简前后端分离应用不能错过这是一个极简的代码展示,使用koaweb服务渲染网站静态页面。系统组件组成前端服务的文件列表:读者可自行准备package.json,本文使用以下版本:"koa":"^2.13.1","koa-router... 查看详情

前后端分离项目—基于springsecurityoauth2.0用户认证

1、前言  现在的好多项目都是基于APP移动端以及前后端分离的项目,之前基于Session的前后端放到一起的项目已经慢慢失宠并淡出我们视线,尤其是当基于SpringCloud的微服务架构以及Vue、React单页面应用流行起来后,情况更甚。... 查看详情

前后端分离架构下的oauth2.0授权流程(代码片段)

...h2.0Simplified关于OAuth2.1草案介绍请参考OAuth2.1用户点击前端开始第三方登录前端调用后端接口开始第三方登录后端组装完client_id,redirect_uri,response_type,state等参数构造重定向到第三方授权服务器的连接,返回给前端。链接如... 查看详情

从零开始搭建django前后端分离项目系列一(技术选型)

前言最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析、报表数据查询、GIS地理化展示、任务监控管理。由于页面功能较复杂,所以采用前后端分离... 查看详情

(dockernginx)springboot+vue前后端分离部署详细完整版

...,主要采用docker容器部署方式。Springboot项目部署:docker构建mysql环境+docker构建项目自身环境。Vue项目:使用docker启动nginx服务器方式代理部署。项目使用mysql8.0作为数据源,所以部署时需要使用docker构建mysql环境及项目自身环境... 查看详情

真实数据对接从0开发前后端分离的企业级上线项目

第1章课程介绍本章中会先让大家了解课程整体情况,然后手把手带大家做一些开发前的准备工作。后台管理系统测试账号和密码(切勿修改,导致其他同学体验不了) 账号:admin密码:admin(Java一期课程ID:96,Java二期进阶课程... 查看详情

前后端分离与前后端不分离

前后端不分离  在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制的,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。  这种应用模式比较适合纯网页应用,但是当... 查看详情

前后端分离

...开发测试了,前端工程师不必等待后端的接口开发好了才开始工作,可以利用mock假数据等方式模拟接口返回数据(当然还有其他方式),前后端都开发好之后双方再进行联调,测试,发现问题及时修复,从而保证项目的正常完... 查看详情

springboot构建restful风格应用

SpringBoot构建RESTful风格应用1.Web开发的两种模式:前后端不分离:以前没有移动互联网时,我们做的大部分应用都是前后端不分的,比如jsp,或者thymeleaf等后端分离模板,在这种架构的应用中,数据基本上都是在后端渲染好返回... 查看详情

前后端分离与不分离

前后端不分离   在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。    这种应用模式比较适合纯网... 查看详情

为什么要进行前后端分离?

一、认识前后端分离可能很多人会有误解,认为web应用的开发期进行了前后端开发工作的分工就是前后端分离。但其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口... 查看详情

前后端分离及不分离

前后端不分离  在前后端不分离的应用模式中,前端页面看到的效果是由后端控制,由后端渲染页面或重定向,后端需要控制前端的展示,前端与后端的耦合度很,这种应用模式比较适合纯网页应用,但是当后端对接APP时,APP... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一)什么是vue?1、渐进式框架是什么意思?2、为什么用vue而不是其他的前端框架?目前流行的前端框架:1)渐进式对比Angular:对比React:2)其他优势二)vue开发环境的搭建1、安... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一)什么是vue?1、渐进式框架是什么意思?2、为什么用vue而不是其他的前端框架?目前流行的前端框架:1)渐进式对比Angular:对比React:2)其他优势二)vue开发环境的搭建1、安... 查看详情