菜单 搜索
首页 前端知识 手把手教你如何把系统的前端页面改成vue 脚手架项目，实现前后端分离

手把手教你如何把系统的前端页面改成vue 脚手架项目，实现前后端分离

2024-05-27 10:05:30 前端知识 前端哥 255 607 我要收藏

目录

第一步：检查node.js是否安装

第二步：配置npm源

第三步：安装vue-cli

第四步：创建vue项目

第五步：启动项目

第六步：整合静态资源

这篇文章从零开始，介绍怎么把现有的一个商城的页面移动到vue脚手架项目上，实现前后端代码的完全分离。

首先，我们需要新建一个vue的脚手架的项目，在此之前，需要安装node.js

打开IntelliJ IDEA或者win+R，输入cmd，打开dos命令窗口，使用cd命令切换到存放vue项目的根目录，比如：把vue项目放到D:/program/vue-workspace。当然了，首先我们要创建这个文件夹。

接下来演示在idea里面创建一个名为vue-project的vue-cli项目


第一步：检查node.js是否安装

npm -v
复制

第二步：配置npm源

配置npm源的命令

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

 由于淘宝的的镜像网站的https证书已经过期，已经无法访问，所以设置成下面的网址

npm config set registry https://registry.npmmirror.com/
复制

配置成功后，可通过get命令可查看npm源

npm config get registry
复制

第三步：安装vue-cli

安装vue-cli的命令

npm install -g @vue/cli
复制

安装完成后，检验vue-cli是否安装成功，注意：这里的命令参数是大写字母的V

vue -V
复制

第四步：创建vue项目

使用vue create命令创建，然后按回车（注意：只需要按一次回车键）

vue create vue-project
复制

接下来，开始配置项目

step1：选择最后一个选项

step2：推荐在列表中选择Babel、Router、Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的Enter键到下一步

 step3：选择vue版本，建议选择2.x版本

step4：接下来的选项是Use history mode for router，选择“是”，输入Y后按下键盘的Enter键到下一步

step5：接下来的选项是Where do you prefer placing config for Babel,ESLint,etc.?，表示“你习惯把一些配置信息存放在哪里?”，推荐选择In package.json，即存放在package.json文件中

step6：最后的选项是Save this as a preset for future projects?，表示“是否保存以上配置信息，作为后续将创建的新工程的预设?”，推荐选择“否”，输入N后按下键盘的Enter键 (提示信息中，N是大写的，表示它是默认选项，不输入N而直接按下Enter键是等效的)

step7：创建vue-cli项目了，只需要等待一段时间

第五步：启动项目

如上图，这时候已经创建完成了，在idea中打开刚刚新建的项目

项目默认通过8080端口启动，如果该端口被占用，则选择8081，以此类推，可以在package.json中指定项目启动的端口号，只需要修改package.json文件里的serve的值为

vue-cli-service serve --port 端口号

 下图就是设置启动端口为8088

点击底部工具栏中的Teminal，输入以下命令：

npm run serve
复制

看到下面的内容就是已经启动完成了

点击蓝色的链接就可以访问创建的项目了

当看到以上页面时，恭喜你，你已经成功创建了第一个vue脚手架项目了。

第六步：整合静态资源

首先介绍一下vue脚手架的项目结构

  • public目录相当于SpringBoot的静态资源目录，里面的文件可以直接访问。
  • asseets一般用来放项目的图片、样式文件、js文件等
  • components用来放提取出来的组件，其实就是vue文件
  • router里面放的是整个项目的路由配置的js文件
  • views存放我们写的页面，比如首页可以为IndexView.vue、HomeView.vue
  • App.vue就是我们的入口页面，打开看到的页面就是它

因为vue是单页面的应用，所有操作都是在一个页面上完成，而单页面是通过vue的路由完成的

我们打开App.vue，删除多余的内容，只留下一个路由。

 删除多余的页面

 删除之后编译会报错

 因为路由里配置的页面找不到了，暂时不用管，打开我们原来的项目的页面。

如上图所示，项目一共有8个HTML文件，也就是8个页面，首先我们看一下这些页面都是什么样的

1、登录页面

2、超市首页

续-超市首页

 3、购物车页面

 4、用户中心页面

 看完以上几张图片，估计很多人都会发现，除了登录页面，其他页面都有两个相似的部分，也就是页面上最上方和最下方的部分，并且每个页面都有相同的页脚。

所以我们把页脚抽出来，作为组件PageFooter.vue，注意：<template>标签内只能有一个<div>

 页头也抽出来，作为组件PageHeader.vue

不要以为那么简单就完了，页头要加载用户的数据，根据返回的数据显示不同内容，所以，要把那块js的代码也复制过来，整个页面的代码如下

<template>
  <div class="header_con">
    <div class="header">
      <div class="welcome fl">欢迎来到天天生鲜!</div>
 
      <div class="fr">
        <div class="login_info fl" v-if="isLogin">
          欢迎您：<em>{{user.nickname}}</em>
          <span>&emsp;|&emsp;</span>
        </div>
 
        <div class="login_btn fl" v-if="!isLogin">
          <a href="/login">登录</a>
 
          <span>|</span>
 
          <a href="/register">注册</a>
        </div>
 
        <div class="user_link fl" v-else>
          <a href="/shop_cart">我的购物车</a>
 
          <span>|</span>
 
          <a href="/user_center">用户中心</a>
 
          <span>|</span>
 
          <a href="javascript:void(0)" @click="logout">退出登录</a>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
  import {error, getData} from "@/assets/js/axiosUtis";
 
  export default {
    data() {
      return {
        isLogin: false, // 当前是否有用户登录
        user: {}, // // 当前登录的用户信息
      }
    },
    created: function () {
      let _this = this;
 
      // 获取登录的用户信息
      getData("/user/getlogin", {}
        , function (response) {
          _this.user = response.data;
          _this.isLogin = !!response.data;
        }, function (err) {
          error(err);
        }
      );
    },
    methods: {
      logout() {
        getData("/user/logout", {}
          , function (response) {
            if (response.data.code === 200) {
              location.href = "/login";
            } else {
              error(response.data.message);
            }
          }, function (err) {
            error(err);
          }
        );
      }
    },
    name: "PageHeader"
  }
</script>
 
<style>
  @import "../assets/css/reset.css";
  @import "../assets/css/main.css";
</style>
复制

接下来，创建8个页面对应的视图，因为都是重复的操作，为了方便，选择购物车页面，把页面的<div id="app"></div>整个块复制到新建的视图ShopCartView.vue中，并删除id="app"。

复制之后把页头和页脚替换成刚刚创建的组件PageFooter和PageHeader，组件的使用很简单，直接当标签用就行了<组件名 />，组件名就是export块里name属性的值

<template>
  <div>
    <PageHeader />
 
    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="/images/logo.png" alt="" />
      </a>
 
      <div class="sub_page_name fl">|购物车</div>
 
      <div class="search_con fr">
        <input class="input_text fl" v-model="search" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="query" />
      </div>
    </div>
 
    <div class="total_count">全部商品<em>{{count}}</em>件</div>
 
    <ul class="cart_list_th clearfix">
      <li class="col01">商品名称</li>
      <li class="col02">商品单位</li>
      <li class="col03">商品价格</li>
      <li class="col04">数量</li>
      <li class="col05">小计</li>
      <li class="col06">操作</li>
    </ul>
 
    <ul class="cart_list_td clearfix" v-for="cart in carts">
      <li class="col01"><input type="checkbox" checked /></li>
      <li class="col02"><img :src="cart.product.image" alt="" /></li>
      <li class="col03">
        {{cart.product.name}}<br>
        <em>{{cart.product.price}}元/{{cart.product.unit}}</em>
      </li>
      <li class="col04">{{cart.product.unit}}</li>
      <li class="col05">{{cart.product.price}}元</li>
      <li class="col06">
        <div class="num_add">
          <a href="javascript:void(0)" class="add fl">+</a>
          <input class="num_show fl" v-model="cart.quantity" />
          <a href="javascript:void(0)" class="minus fl">-</a>
        </div>
      </li>
      <li class="col07">{{cart.money}}元</li>
      <li class="col08"><a href="javascript:void(0)" @click="del(cart.id)">删除</a></li>
    </ul>
 
    <ul class="settlements">
      <li class="col01">
        <input type="checkbox" checked />
      </li>
      <li class="col02">全选</li>
      <li class="col03">合计(不含运费)：
        <span>¥</span><em>{{total}}</em><br>
        共计<b>{{count}}</b>件商品
      </li>
 
      <!--购物车数量不为0时显示-->
      <li class="col04" v-if="count !== 0">
        <a href="/html/place_order.html">去结算</a>
      </li>
    </ul>
 
    <PageFooter />
  </div> 
</template>
 
<script>
  export default {
    name: "ShopCartView"
  }
</script>
 
<style scoped>
 
</style>
复制

修改之后的页面是上面这样的，但是因为idea并不知道这两个标签<PageHeader />和<PageFooter />是什么意思，所以我们要通过引入这两个组件

<script>
  import PageHeader from "@/components/PageHeader";
  import PageFooter from "@/components/PageFooter";
 
  export default {
    name: "ShopCartView"
  }
</script>
复制

这个时候发现这两条引入的语句是灰色的，提示删除未使用的引入

那是因为少了配置，在export default块里的components属性中声明页面使用了哪些组件

<script>
  import PageHeader from "@/components/PageHeader";
  import PageFooter from "@/components/PageFooter";
 
  export default {
    name: "ShopCartView",
    components: {
      PageHeader,
      PageFooter
    }
  }
</script>
复制

这样，我们才算使用了自己定义的组件，这时候export块提示没有使用到的默认导出，那是因为没有配置路由。打开router目录下的index.js，在里面配置着项目的路由。

我们需要修改的是routes 部分，我们照着葫芦画瓢就好了。配置完以下路由，当我们访问http://localhost:8088/shop_cart时，就能访问到购物车的页面ShopCartView.vue了

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: '/shop_cart',
    name: 'shop_cart',
    component: () => import('../views/ShopCartView.vue')
  }
];
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
 
export default router;
复制

这样就配置了第一个路由，最后，把我们的js文件也复制过来。

<template>
  <div>
    <PageHeader />
 
    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="../assets/images/logo.png" alt="" />
      </a>
 
      <div class="sub_page_name fl">|购物车</div>
 
      <div class="search_con fr">
        <input class="input_text fl" v-model="search" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="query" />
      </div>
    </div>
 
    <div class="total_count">全部商品<em>{{count}}</em>件</div>
 
    <ul class="cart_list_th clearfix">
      <li class="col01">商品名称</li>
      <li class="col02">商品单位</li>
      <li class="col03">商品价格</li>
      <li class="col04">数量</li>
      <li class="col05">小计</li>
      <li class="col06">操作</li>
    </ul>
 
    <ul class="cart_list_td clearfix" v-for="cart in carts">
      <li class="col01"><input type="checkbox" checked /></li>
      <li class="col02"><img :src="cart.product.image" alt="" /></li>
      <li class="col03">
        {{cart.product.name}}<br>
        <em>{{cart.product.price}}元/{{cart.product.unit}}</em>
      </li>
      <li class="col04">{{cart.product.unit}}</li>
      <li class="col05">{{cart.product.price}}元</li>
      <li class="col06">
        <div class="num_add">
          <a href="javascript:void(0)" class="add fl">+</a>
          <input class="num_show fl" v-model="cart.quantity" />
          <a href="javascript:void(0)" class="minus fl">-</a>
        </div>
      </li>
      <li class="col07">{{cart.money}}元</li>
      <li class="col08"><a href="javascript:void(0)" @click="del(cart.id)">删除</a></li>
    </ul>
 
    <ul class="settlements">
      <li class="col01">
        <input type="checkbox" checked />
      </li>
      <li class="col02">全选</li>
      <li class="col03">合计(不含运费)：
        <span>¥</span><em>{{total}}</em><br>
        共计<b>{{count}}</b>件商品
      </li>
 
      <!--购物车数量不为0时显示-->
      <li class="col04" v-if="parseInt(count) !== 0">
        <a href="/place_order">去结算</a>
      </li>
    </ul>
 
    <PageFooter />
  </div>
</template>
 
<script>
  import Vue from "vue";
  import ElementUI from "element-ui";
  import "element-ui/lib/theme-chalk/index.css";
  import {error, getData} from "@/assets/js/axiosUtis";
  import PageHeader from "@/components/PageHeader.vue";
  import PageFooter from "@/components/PageFooter.vue";
 
  Vue.use(ElementUI);
 
  export default {
    data() {
      return {
        total: 0,
        count: 0,
        search: "",
        carts: [] // 购物车
      }
    },
    created: function () {
      let _this = this;
 
      // 查询查询用户的购物车
      getData("/shop_cart/select", {}
        , function (response) {
          _this.count = 0;
          _this.total = 0;
          _this.carts = response.data;
 
          for (let i = 0; i < _this.carts.length; i++) {
            let cart = _this.carts[i];
 
            _this.count += cart.quantity;
            _this.total += cart.money;
          }
        },function (err) {
          error(err);
        }
      );
    },
    methods: {
      query() { // 查询商品
        location.href = "/list?name=" + this.search;
      },
      del(id) { // 删除购物车
        let bool = confirm("是否确认删除？");
 
        if (bool) {
          let _this = this;
 
          getData("/shop_cart/deleteById/" + id, {}, function () {
            // 查询查询用户的购物车
            getData("/shop_cart/select", {}, function (response) {
              _this.count = 0;
              _this.total = 0;
              _this.carts = response.data;
 
              for (let i = 0; i < _this.carts.length; i++) {
                let cart = _this.carts[i];
 
                _this.count += cart.quantity;
                _this.total += ((cart.money * 100) * cart.quantity) / 100;
              }
            },function (err) {
              error(err);
            });
          },function (err) {
            error(err);
          });
        }
      }
    },
    name: "ShopcartView",
    components: {
      PageFooter,
      PageHeader
    }
  }
</script>
 
<style>
  @import "../assets/css/reset.css";
  @import "../assets/css/main.css";
</style>
复制

因为项目要用到axios和element-ui，安装一下

安装element-ui

npm i element-ui -S
复制

 安装axios

npm i axios -S
复制

最下面的导入css可以写到<script>块里，如图

好了，文章就分享到这里了，更多细节可以参考项目的源代码，如果文章对你有所帮助，不要忘了点赞+收藏哦~

天天生鲜商城vue前端项目icon-default.png?t=N7T8https://gitee.com/he-yunlin/ttsx.git

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9729.html
标签
axios
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！