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

开发环境及所用到的技术

开发环境：

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

用到的技术：

后端： SpringBoot， SpringCloud，MyBatis

前端： VUE2，ElementUI

项目设想

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

什么是微服务

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

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

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

登录后复制

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

• 1.
• 2.
• 3.

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

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

新建空的maven工程

2. 打开IDEA，file-》new-》project，选择Maven。点击Next。

3. 

4. 选择路径，填写名字即可。

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

3. 配置父项目中的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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

登录后复制

<!--    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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

（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。

1. 在项目文件夹中，右键打开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工程目录。

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

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

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

成功。

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

原创作者: u_15464066 转载于: https://blog.51cto.com/u_15464066/11517622