微服务和VUE入门教程(0): 着手搭建项目

hdubigben

已于 2023-02-11 11:04:45 修改

阅读量1.5k

点赞数 2

分类专栏：微服务和VUE 文章标签： java vue.js

于 2020-08-12 14:24:13 首次发布

本文链接：https://blog.csdn.net/weixin_42754905/article/details/107956476

版权

微服务和VUE 专栏收录该内容

27 篇文章 18 订阅

订阅专栏

微服务和VUE入门教程(0): 着手搭建项目

开发环境及所用到的技术

开发环境：

后端：jdk1.8，IDEA , mysql5.5，node14.2.0

用到的技术：

后端： SpringBoot， SpringCloud，MyBatis

前端： VUE2，ElementUI

项目设想

我想做一个学生信息管理系统，包括登录注册，学生信息的增删改查，学生照片的上传

什么是微服务

微服务是一种思想，具体什么样的项目架构是微服务没有一个准确的定义，因为“微”的程度没有一个人或者一个公司给出一个具体的定义。

摘抄其他人的一个观点，满足以下两点的可以被看成微服务架构：

单一职责的。一个微服务应该都是单一职责的，这才是“微”的体现，一个微服务解决一个业务问题（注意是一个业务问题而不是一个接口）。
面向服务的。将自己的业务能力封装并对外提供服务，这是继承SOA的核心思想，一个微服务本身也可能使用到其它微服务的能力

作者：centychen
链接：https://www.jianshu.com/p/7293b148028f
来源：简书

微服务框架现在主流的有SpringCloud，阿里的Dubbo。考虑到SpringCloud全家桶的强大，我们使用SpringCloud。

SpringCloud五大组件：服务注册中心，网关，配置中心，负载均衡，熔断。接下来，我们会用到相关的技术。

新建空的maven工程

打开IDEA，file-》new-》project，选择Maven。点击Next。
选择路径，填写名字即可。

这就是创建的Maven父项目，我们会在里面添加需要的组件以及微服务。

在这里插入图片描述

配置父项目中的pom.xml文件，主要配置两部分，parent和dependencyManagement，关于dependencies中的配置后面会加入。前提是已经配好了Maven。

<!--springboot-->
    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.1.6.RELEASE</version>
    </parent>

   <!--    springcloud-->
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>Greenwich.SR3</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-site-plugin</artifactId>
                <version>3.3</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

（ps：我用的SpringBoot版本是2.1.6.RELEASE，其对应SpringCloud的版本是Greenwich.SR3。如果两个版本不对应，会出各种问题。）

ok，空的Maven父项目就这样。

新建空的vue工程

选择vue的原因有很多，主要是公司现在的项目在用。建立vue项目需要把node装好，这里就不细讲了。可参考

https://www.runoob.com/vue2/vue-install.html（菜鸟教程）。

我已经配好了node，npm（阿里的镜像cnpm），全局安装了vue-cli。

在项目文件夹中，右键打开cmd。输入： vue init webpack my-project（项目名字）。

有两点需要注意的地方：

（1） Use ESLint to lint your code? 选择No。不然代码编写的时候会各种提示你代码不符合规范

（2） Should we run npm install for you after the project has been created? (recommended)

选择no。因为我们使用的是阿里镜像，运行语句为cnpm install。需要自己去运行。

其余选项默认即可。

在这里插入图片描述

这就是建好的vue工程目录。

进入此目录。右键cmd输入框中，运行cnpm install。下载需要的配置文件。

在这里插入图片描述

若不报错成功，会在项目目录下出现node_modules文件夹。

在项目目录下，运行cnpm run dev，启动项目。浏览器打开http://localhost:8080

在这里插入图片描述

成功。

接下来，我们先使用vue实现登录界面。

hdubigben

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
微服务和VUE入门教程(0): 着手搭建项目

微服务和VUE(0): 着手搭建项目开发环境及所用到的技术开发环境：后端：jdk1.8，IDEA , mysql5.5，node14.2.0用到的技术：后端： SpringBoot， SpringCloud，MyBatis 前端： VUE2，ElementUI项目设想我想做一个学生信息管理系统，包括登录注册，学生信息的增删改查，学生照片的上传什么是微服务微服务是一种思想，具体什么样的项目架构是微服务没有一个准确的定义，因为“微”的程度没有一个人或者一个公司给出一个具体的定
复制链接

扫一扫

专栏目录