【新手向】基于Vue2.0和SpringBoot的前后端分离项目从0到上线经验总结

(本文主要是把个人亲身跟着学过的优秀的教程推荐给大家,也算是总结我的学习历程,如果你有一定的基础,那么本文就显得有些弱智,如果你的基础没那么好,也许可以参考一下我的学习经历,就算帮不上忙也可以当故事听一听。说话是要负责任的,我的故事再烂,那也是真实的,另外欢迎探讨,欢迎指教)

前后端分离web项目搭建

什么是前后端分离,我找了一个讲的通俗易懂的博客,链接在这:前后端分离

本文主要介绍主流前后端分离项目使用到的关键性技术和环境搭建以及如何部署到阿里云服务器

前端

​ 本文主要使用的前端框架为Vue。如果没有学过Vue,那么我强烈推荐一个我学Vue时看的B站视频集合:Vue.js详细教程 ,这个视频基于vue2.0,同时也讲解了vue3.0。我的建议是先看前117集,因为这是vue全家桶的基础内容(不需要看作者给的购物车项目内容)以及视频中axios的内容。

前端技术栈

1.前端框架vue2.0以及vue全家桶

2.前端开发环境node.js

3.前端项目搭建脚手架:vue-cli2.0

4.前端项目包管理工具:npm

5.前端开发IDE:WebStorm

6.前端组件库Element

前端配置步骤

Node.js和Npm

​ 首先我们配置node.js的环境,因为初次配置node的时候会踩坑,所以我结合我自己的使用经验,找到了一个写的很好的node环境配置教程,分享给大家。1和2是node.js的安装配置,3是Node.js教程,推荐使用1和2的教程进行安装,感兴趣可以看看Node.js的教程,一般的话会用Npm就可以了。

1.NodeJS 安装及环境配置

2.npm太慢, 淘宝npm镜像使用方法

3.Node.js教程

Vue-cli

Vue-cli是vue的项目脚手架,这里推荐直接看上述提到的Vue.js详细教程 中关于vue脚手架的部分,从第90集开始。建议在看脚手架之前看一下webpack部分,这样可以在学脚手架的时候更加清楚原理。

Vue-cli2

WebStorm

一个比较好用的前端开发IDE,上手简单,配合视频中老师的使用方法使用即可。

Webstorm下载地址

Element

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

前端除了要会写代码逻辑,界面美化也是很有必要的,Element-UI提供了很多外观精美的组件,同时也提供了详细的组件使用方法,element不需要什么教程,如果你稍微懂一点点html、css、js的话,element的上手很简单,官网就是最好的教程,这一页告诉了你如何安装与使用element的组件。

当这些都配置好之后,可以自己搭建一个Vue环境界面了,电脑上就可以进行前端的开发了。(对于Vuex,由于我开发的项目暂时还没用到,所以就不介绍了,感兴趣的可以跟着视频中的老师学。)
在这里插入图片描述

后端

本文主要介绍的后端开发框架为SpringBoot。如果用过Spring,有过后端开发经验的同学,比如SSM、SSH,那么使用起SpringBoot非常简单。如果从来没有了解过java开发,虽然我建议从头学一下Spring,但是由于时间原因,我建议直接进行项目的实践,比如去github上找一个star数比较多、实现的功能比较少比较简单的项目,先把别人的代码逻辑看懂,然后再进行简单的修改,比如实现一个简单实体类的CRUD(增删改查)。

后端技术栈:

1.Spring框架:SpringBoot

2.持久层框架:Mybatis

3.项目构建管理工具:Maven

4.后端开发IDE:IDEA

后端配置步骤

SpringBoot

未完待续

SpringBoot

发布了13 篇原创文章 · 获赞 2 · 访问量 3092
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览