前后端分离 npm --＞ cnpm --＞ @Vue ui (Vue脚手架) --＞ Vue2.0 --＞ Ngnix --＞ 跨域 --＞ Tomcat --＞ JavaEE

原创 于 2023-07-21 23:40:37 发布 · 911 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #vue.js #node.js #ui #nginx

本文详细介绍了前后端分离的开发环境搭建，包括Node.js的安装与卸载、npm和cnpm的使用、Vue项目的创建与配置、Vue开发工具VSCode的安装及插件、端口修改和开发流程。此外，还讲解了Nginx的部署、跨域问题的解决方法，以及Tomcat后端服务器的基础知识。

前后端分离

前后端分离

在这里插入图片描述
在这里插入图片描述

Node.JS

node js 介绍

Node js是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， 让JavaScript 运行在服务端的开发平台。详情可以参考这个博主的博客https://blog.youkuaiyun.com/m0_55534317/article/details/126101820

Node js 的安装

安装包已上传至我的资源文件中，或者在官网直接下载都可以，下载一路下一步就可以，安装好后会自动配置全局的环境变量，打开cmd命令行输入 node -v可以显示版本号即为安装成功。
在这里插入图片描述

Node js 的卸载

打开命令行 输入 where node 会显示你的安装路径
在这里插入图片描述
在win打开的菜单栏输入Node js 打开文件位置 里面有卸载程序
在这里插入图片描述

在这里插入图片描述
在以下路径下还有下载的东西，删除干净

C:\Users\DELL\AppData\Local

在这里插入图片描述

npm

npm 介绍

npm是Node.js默认的软件包管理工具，就相当于与后端的maven一样，会随着nodejs的安装自动安装。
在命令行使用 npm -v 命令 ，可以查看npm的版本号。
在这里插入图片描述

npm 配置

使用管理员身份运行命令行，在命令行中，执行如下指令：（路径是NodeJS的安装目录）

npm config set prefix "D:\devsoft\nodejs"

切换npm为淘宝镜像，使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

cnpm

cnpm 介绍

cnpm是中国版的npm使用淘宝的镜像，在网络下载不佳的时候cnpm就排上了用场。

cnpm 安装

npm install -g cnpm --registry=https://registry.npmmirror.com

Vue ui

Vue ui 介绍

vue ui是一个vue项目的脚手架用于快速构建Vue项目，是前端开发一个必不可少的一个工具。

前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。

Vue-cli主要提供了如下功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

运行Vue-cli需要依赖NodeJS，NodeJS是前端工程化依赖的环境。

所以我们需要先安装NodeJS，然后才能安装Vue-cli

Vue ui 安装

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

如果网络不佳的话可以使用cnpm(前提是已经安装好cnpm)

cnpm install -g @vue/cli

等待一会儿，安装完毕后会有一个时间，表示安装成功。
在这里插入图片描述
安装完毕之后可以使用以下命名进行查看，如果显示版本号即为成功：

vue --version

在这里插入图片描述

Vue ui 的使用

在前端项目的工作空间中，打开命令行数据 vue ui 命令会打开项目构建页面接下来进行这些操作:
① 也可以使用命令常见好项目在项目中进入 vue create vue-project01
② 在命令行中输入 vue ui 打开图形界面
在这里插入图片描述
③ 在ui界面创建项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
创建项目的过程，需要联网进行，这可能会耗时比较长的时间，请耐心等待。 windows的命令行，容易卡顿，我们可以随便敲击一下键盘。
在这里插入图片描述
如果出现如下字样，就说明前端工程已经创建完毕了。
在这里插入图片描述
创建完毕后，就可以直接关闭页面和命令行了，到此工程创建完毕。
在这里插入图片描述

Vue

Vue 介绍

  • MVVM是Model-View-ViewModel的简写，它本质上就是MVC的改进版；MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

    • M： 即Model，模型，指的就是数据
    • V： 即View， 视图，指的就是页面
    • VM：即View-Model，指的是模型和数据的双向绑定(即view和Model互相影响，Model变了，view随之改变；view变了，Model也随之改变)

  • 基于MVVM模式的前端框架三巨头：Vue、React、AngularJS，国内目前非常火的就是：Vue
    在这里插入图片描述

Vue 开发工具（VS Code）

VS Code安装

直接在我的上传资源下载或 VS Code官网：https://code.visualstudio.com，点击 DownLoad for Windows下载windows版本。一路下一步就可以，改成无中文无空格的路径就可以。

VS code 插件下载

安装完VS Code需要下载以下几个插件：在左边的最后一个扩展里面搜索以下插件名字，点击 install
如果右下角提醒你重启，就重启不然不变语言，或者卸载了再重新安装。
①Chinese (Simplified) Language Pack
在这里插入图片描述
②Code Spell Checker
在这里插入图片描述
③VueHelper在这里插入图片描述
④Vetur在这里插入图片描述

⑤IntelliJ IDEA Keybindings在这里插入图片描述

在VS Code 打开Vue项目

修改端口

在VS Code启动之后，他会占用8080端口，这跟我们后台tomcat的端口就冲突了，我们修改为7000

在vue.config.js文件中，添加端口号的配置，然后重启一下vue项目即可

在这里插入图片描述

开发流程

我们以main.js作为文件的主入口，此文件会引入我们开发的根组件App.vue

我们可以在根组件中编写代码，也可以在其它自定义组件中开发，再引入到根组件中

组件：我们开发代码的主战场，一般包含三部分：template（定义HTML）、script（定义js）、style（定义css）
在这里插入图片描述

安装组件

① 在当前工程的目录下，在命令行执行指令

npm install element-ui@2.15.3;
npm install axios;

② 在main.js中引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在这里插入图片描述
③ Vue文件（界面）
在这里插入图片描述
④在根组件中引入组件
在这里插入图片描述
⑤在main.js中开启axios全局路径

// 设置axios全局api
import axios from 'axios'

// 请求基准路径的配置  后台
axios.defaults.baseURL = 'http://127.0.0.1:8080/'

在这里插入图片描述
⑥启动项目查看结果
启动，项目右边的三个点可以打开npm脚本，添加项目到工作空间，选择信任
在这里插入图片描述
查看结果
在这里插入图片描述

配置路由

路由用于实现在前端的多个视图之间进行跳转

在这里插入图片描述

vue路由组成部分作用
VueRouter路由核心类，负责根据路由请求在路由视图中动态渲染选中的组件
router-link请求连接组件，浏览器会将其渲染为超链接标签
router-view动态视图组件，动态视图组件，用来渲染展示与路由路径对应的组件

在这里插入图片描述

定义路由表

在router/index.js中定义路由表

const routes = [
  {
    path: '/',
    name: 'student',
    component: () => import('../views/StudentView.vue')
  },
  {
    path: '/student',
    name: 'student',
    component: () => import('../views/StudentView.vue')
  },
  {
    path: '/teacher',
    name: 'teacher',
    component: () => import('../views/TeacherView.vue')
  }
]

在这里插入图片描述

添加路由路径

在StudentView和TeacherView侧边栏文字上添加路由对应的path路径

<el-menu-item index="1-1">
    <router-link to="/student"> 学生管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/teacher"> 教师管理</router-link>
</el-menu-item>

在这里插入图片描述

修改App.vue

在这里插入图片描述

打包部署

我们开发好的前端程序，最终需要部署到nginx服务器上去运行，这里有两个步骤：打包和部署

打包

将我们开发好的程序，打成可运行的目录dist
在这里插入图片描述

部署

Nginx是一款轻量级的Web服务器，可以把我们大前端程序放到里面运行，默认端口是80

Ngnix （前端服务器）

Nginx 介绍

Nginx是一款轻量级的Web服务器，可以把我们大前端程序放到里面运行，默认端口是80

Nginx 安装

通过我上传的资源可以下载，解压直接使用即可，双击直接启动就可以，可以在资源管理器中查看到进程或者直接访问 http://localhost:80 会显示服务器主页，可能会启动失败，一个原因就是端口冲突的原因，可以在cmd中输入以下名进行查看80端口的占用情况：

netstat -ano  | findstr "80"      //查询指定端口占用情况

如果端口冲突了，可以在Nginx配置文件中修改端口
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目部署

① 了解Nginx 目录作用
在这里插入图片描述
② 将dist目录中的文件复制到nginx的html目录下
在这里插入图片描述
③ 双击nginx.exe启动软件
在这里插入图片描述
④ 在浏览器访问localhost:80,查看效果

http://localhost:80

跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。最简单的说就是从当前域名的网站下不能请求非同源的地址，同源是指，域名，协议，端口均相同。
在这里插入图片描述

前端跨域

Vue 设置跨域

在这里插入图片描述

Nginx 设置跨域

location /api {
        rewrite  ^/api/?(.*)$ /$1 break;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8080; # 转发地址
    }

在这里插入图片描述

后端设置跨域

在当前项目中如果只设置前端跨域 那项目就只能通过get请求 ， post请求会跨域失败 无法实现post相关请求和功能

定义一个过滤器配置运行跨域

package com.itheima.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 解决全站乱码问题，处理所有的请求
 */
@WebFilter("/*")
public class CharacterEncodingFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse rep, FilterChain filterChain) throws IOException, ServletException {
        //将父接口转为子接口
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) rep;

        //不需要过滤的url
        String path = request.getServletPath();
        String[] urls = {".html", ".js", ".css", ".ico", ".jpg", ".png"};
        boolean flag = true;
        for (String str : urls) {
            if (path.indexOf(str) != -1) {
                flag = false;
                break;
            }
        }

        //需要过滤的资源走这个逻辑
        if (flag) {
            //解决post请求中文数据乱码问题
            if (request.getMethod().equalsIgnoreCase("post")) {
                request.setCharacterEncoding("utf-8");
            }

            //解决跨域问题
            /* 允许跨域的主机地址 */
            response.setHeader("Access-Control-Allow-Origin", "*");
            /* 允许跨域的请求方法GET, POST, HEAD 等 */
            response.setHeader("Access-Control-Allow-Methods", "*");
            /* 重新预检验跨域的缓存时间 (s) */
            response.setHeader("Access-Control-Max-Age", "3600");
            /* 允许跨域的请求头 */
            response.setHeader("Access-Control-Allow-Headers", "*");
            /* 是否携带cookie */
            response.setHeader("Access-Control-Allow-Credentials", "true");


            //处理响应乱码
            response.setContentType("application/json;charset=utf-8");
        }

        filterChain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {

    }
}

在这里插入图片描述

Tomcat(后端服务器)

详情请参考 另外的博客 IDEA 与 Tomcat

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PY_XAT_SFZL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值