华山资源网

一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
网络编程 2024/12/31 佚名
3 1

松哥的书里边，其实有涉及到 Vue，但是并没有详细说过，原因很简单，Vue 的资料都是中文的，把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了，个人感觉这个是最好的 Vue.js 学习资料 ，因此在我的书里边就没有多说。但是最近总结小伙伴遇到的问题，感觉很多人对前后端分离开发还是两眼一抹黑，所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事，算是一个简单的入门科普吧。

前后端不分

  1. 后端模板：Jsp、FreeMarker、Velocity
  2. 前端模板：Thymeleaf

前后端不分，Jsp 是一个非常典型写法，Jsp 将 HTML 和 Java 代码结合在一起，刚开始的时候，确实提高了生产力，但是时间久了，大伙就发现 Jsp 存在的问题了，对于后端工程师来说，可能不太精通 css ，所以流程一般是这样前端设计页面-->后端把页面改造成 Jsp --> 后端发现问题 --> 页面给前端 --> 前端不会Jsp。这种方式效率低下。特别是在移动互联网兴起后，公司的业务，一般除了 PC 端，还有手机端、小程序等，通常，一套后台系统需要对应多个前端，此时就不可以继续使用前后端不分的开发方式了。

在前后端不分的开发方式中，一般来说，后端可能返回一个 ModelAndView ，渲染成 HTML 之后，浏览器当然可以展示，但是对于小程序、移动端来说，并不能很好的展示 HTML（实际上移动端也支持HTML，只不过运行效率低下）。这种时候，后端和前端数据交互，主流方案就是通过 JSON 来实现。

前后端分离

前后端分离后，后端不再写页面，只提供 JSON 数据接口（XML数据格式现在用的比较少），前端可以移动端、小程序、也可以是 PC 端，前端负责 JSON 的展示，页面跳转等都是通过前端来实现的。前端后分离后，前端目前有三大主流框架：

Vue

作者尤雨溪，Vue本身借鉴了 Angular，目前GitHubstar数最多，建议后端工程师使用这个，最大的原因是Vue上手容易，可以快速学会，对于后端工程师来说，能快速搭建页面解决问题即可，但是如果你是专业的前端工程师，我会推荐你三个都去学习 。就目前国内前端框架使用情况来说，Vue 算是使用最多的。而且目前来说，有大量 Vue 相关的周边产品，各种 UI 框架，开源项目，学习资料非常多。

React

Facebook 的产品。是一个用于构建用户界面的 js 库，React 性能较好，代码逻辑简单。

Angular

AngularJS 是一款由 Google 维护的开源 JavaScript 库，用来协助单一页面应用程序运行。它的目标是透过 MVC 模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。

Vue简介

Vue (读音 /vju"htmlcode"> 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/UploadFiles/2021-04-02/vue.js">


用户修改输入框中的数据，引起变量的变化，进而实现九九乘法表的更新。


SPA


SPA（single page web application），单页面应用，是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（ HTML、JavaScript 和 CSS ）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。SPA 有一个缺点，因为 SPA 应用部署后只有1个页面，而且这个页面只是一堆 js 、css 引用，没有其他有效价值，因此，SPA 应用不易被搜索引擎收录，所以，一般来说，SPA 适合做大型企业后台管理系统。


Vue 使用方式大致上可以分为两大类：


    
  
  1. 直接将Vue在页面中引入，不做 SPA 应用
    2. 
  
  2. SPA应用
    3. 



基本环境搭建


首先需要安装两个东西：


    
  
  1. NodeJS
    2. 
  
  2. npm
    3. 



直接搜索下载 NodeJS 即可，安装成功之后，npm 也就有了。安装成功之后，可以 在 cmd 命令哈验证是否安装成功：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


NodeJS 安装成功之后，接下来安装 Vue的工具：




npm install -g vue-cli   # 只需要第一次安装时执行

vue init webpack my-project  # 使用webpack模板创建一个vue项目

cd my-project #进入到项目目录中

npm install  # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）

npm run dev # 启动项目 




 启动成功后，浏览器输入 http://localhost:8080就能看到如下页面：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：


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


修改完成后，就能有效提高下载的成功率。


Vue 项目结构介绍


Vue 项目创建完成后，使用 Web Storm 打开项目，项目目录如下：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


    
  
  1. build 文件夹，用来存放项目构建脚本
    2. 
  
  2. config 中存放项目的一些基本配置信息，最常用的就是端口转发
    3. 
  
  3. node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件
    4. 
  
  4. src 这个目录下存放项目的源码，即开发者写的代码放在这里
    5. 
  
  5. static 用来存放静态资源
    6. 
  
  6. index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面
    7. 
  
  7. package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖
    8. 



对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


    
  
  1. assets 目录用来存放资产文件
    2. 
  
  2. components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。
    3. 
  
  3. 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。
    4. 
  
  4. router 目录中，存放了路由的js文件
    5. 
  
  5. App.vue 是一个Vue组件，也是项目的第一个Vue组件
    6. 
  
  6. main.js相当于Java中的main方法，是整个项目的入口js
    7. 



main.js 内容如下：





import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})





    
  
  1. 在main.js 中，首先导入 Vue 对象
    2. 
  
  2. 导入 App.vue ，并且命名为 App
    3. 
  
  3. 导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略
    4. 
  
  4. 所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 '#app'，'#app' 指提前在index.html 文件中定义的一个div
    5. 
  
  5. 将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。
    6. 
  
  6. 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明。
    7. 
  
  7. template 中定义了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中。
    8. 



因此，可以猜测，项目启动成功后，看到的页面效果定义在 App.vue 中





<template>
 <div id="app">
  <img src="/UploadFiles/2021-04-02/logo.png">


    
  
  1. App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）
    2. 
  
  2. 页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view
    3. 
  
  3. 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作
    4. 
  
  4. 页面样式就是针对 template 中 HTML 元素的页面美化操作
    5. 



需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：





import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})





    
  
  1. 这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，
    2. 
  
  2. 创建一个Router对象，并定义路由表
    3. 
  
  3. 这里定义的路由表，path为 / ，对应的组件为 HelloWorld，即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件
    4. 



WebStorm 中启动Vue


也可以直接在 webstorm 中配置vue并启动，点击右上角进行配置：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


然后配置一下脚本 ：


一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


配置完成后，点击右上角启动按钮，就可以启动一个 Vue 项目，如下：


 一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)


项目编译


这么大一个前端项目，肯定没法直接发布运行，当开发者完成项目开发后，将 cmd 命令行定位到当前项目目录，然后执行如下命令对项目进行打包：


npm run build


打包成功后，当前项目目录下会生成一个 dist 文件夹，这个文件夹中有两个文件，分别是 index.html 和 static ，index.html 页面就是我们 SPA 项目中唯一的 HTML 页面了，static 中则保存了编译后的 js、css等文件，项目发布时，可以使用 nginx 独立部署 dist 中的静态文件，也可以将静态文件拷贝到 Spring Boot 项目的 static 目录下，然后对 Spring Boot 项目进行编译打包发布。


总结


因为松哥的读者以后端程序猿居多，也有少量前端程序猿，因此本文松哥想从一个后端程序猿的角度来带大家理解一下前后端分离以及 Vue 的一些基本用法，也欢迎专业的前端工程师出来拍砖。


以上所述是小编给大家介绍的前后端分离及Vue.js入门详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/31

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com