精华内容
下载资源
问答
  • 前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。 从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题: ...

    前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。 
    从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题:

    • WEB服务中,SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式,SPA不能作为一种通用的解决方案。
    • 现阶段的SPA开发模式,接口通常是按照展现逻辑来提供的,有时候为了提高效率,后端会帮我们处理一些展现逻辑,这就意味着后端还是涉足了View层的工作,不是真正的前后端分离。

    SPA式的前后端分离,是从物理层做区分(认为只要是客户端的就是前端,服务器端的就是后端),这种分法已经无法满足我们前后端分离的需求,我们认为从职责上划分才能满足目前我们的使用场景:

    • 前端:负责View和Controller层。
    • 后端:只负责Model层,业务处理/数据等。

     

    前期准备

    需要准备相关的环境,比如git、nodejs等,环境准备好之后全局安装express-generator、vue-cli、webpack、webpack-cli等。

    ① 通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

    express-generator 包含了 express 命令行工具。通过如下命令即可安装:

    $ npm install express-generator -g

    ② 全局安装 vue-cli ,在命令提示窗口执行:

    $ npm install -g vue-cli 

    ③ webpack、webpack-cli等安装与上面类似,不再赘述。

    目录框架

    ① 新建项目文件夹web-test,在项目下再新建两个文件夹,分别是client和server

    ② 控制台终端,进入server目录,执行如下命令:

    $ express --ejs [server目录] //使用ejs模板,不指定目录则为当前目录
    

     完成以后在server目录会自动生成对应的目录结构:

    server目录结构

    ③ 控制台终端,进入client目录,执行如下命令:

    $ vue init webpack [client目录] //使不指定目录则为当前目录
    
    //如果没有特殊需求的话就一直回车,然后等待安装成功(时间有点慢,可以选择cnpm,自行了解~~~)

     完成以后在client目录会自动生成对应的目录结构:

    client目录结构

    启动server/client

    ① 在server目录下,通过执行如下命令启动服务器:

    $ npm start

    在控制台就可以看到服务器已启动。

    在浏览器输入localhost:3000,则能看到express框架的初始化界面。

     

    ② 在client目录下,通过执行如下命令启动服务器:

    $ npm run dev

    在控制台就可以看到客户端已启动。

    在浏览器输入localhost:8080,则能看到vue的初始化界面。

     

     

     

     

    展开全文
  • Springboot+vue前后端分离项目搭建一、准备工作二、项目骨架搭建2.1 后端框架搭建——idea利用Maven搭建springboot项目2.2 前端框架搭建——vue-cli4搭建vue项目安装cnpm安装脚手架清空缓存处理创建项目 一、准备...

    一、准备工作

    Spring Boot项目开发环境与工具:

    • jdk
    • maven
    • idea

    Vue项目开发环境:

    • nodejs
    • vscode

    后端技术栈:

    • SpringBoot
    • mybatis plus
    • postgresql

    前端技术栈:

    • vue
    • element-ui
    • axios

    二、项目骨架搭建

    2.1 后端框架搭建——idea利用Maven搭建springboot项目

    • 创建maven项目,不必选择项目骨架,直接单击Next按钮在这里插入图片描述
    • 配置项目名称、项目位置、组织名称、模块名称、项目版本号等信息在这里插入图片描述
    • 添加依赖,spring-boot-starter-parent
    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.4.1</version>
            <!-- 提供一些maven配置,同时提供了dependency0management,可以使开发者在引入其他依赖时不必输入版本号,方便依赖管理 -->
        </parent>
        <groupId>org.example</groupId>
        <artifactId>woa</artifactId>
        <version>1.0-SNAPSHOT</version>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
        </dependencies>
    
    </project>
    
    • 编写启动类

    在这里插入图片描述

    package org.example;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
    import org.springframework.context.annotation.ComponentScan;
    
    // @SpringBootApplication 包括 @SpringBootConfiguration、@EnableAutoConfiguration、
    // @ComponentScan
    @EnableAutoConfiguration
    // @EnableAutoConfiguration注解表示开启自动化配置,由于项目汇总添加了spring-boot-starter-web依赖
    // 因此在开启了自动化配置后会自动进行Spring和Spring MVC的配置
    @ComponentScan
    // @ComponentScan包扫描
    public class App {
        // 在Java项目的main方法中,通过SpringApplication中的run方法启动项目,第一个参数传入App.class
        // 告诉Spring哪个是主要组件,第二个参数是运行时输入的其他参数
        public static void main(String[] args){
            SpringApplication.run(App.class,args);
        }
    }
    
    • 创建一个控制器,提供“/hello”接口

      package org.example.controller;
      
      import org.springframework.web.bind.annotation.GetMapping;
      import org.springframework.web.bind.annotation.RestController;
      
      @RestController
      // @RestController 包含@ResponseBody/@Controller
      public class HelloController {
      
          @GetMapping("/hello")
          public String hello(){
              return "hello spring boot";
          }
      }
      
    • 启动项目,测试

    在这里插入图片描述

    2.2 前端框架搭建——vue-cli4搭建vue项目

    安装cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装脚手架

    cnpm install -g @vue/cli

    清空缓存处理

    npm cache clean --force

    创建项目
    • 进入目标目录,选择自定义方式创建目录
    vue create 项目名
    // 这里面呢回车别按太快,空格是勾选,回车是下一步
    

    在这里插入图片描述

    • 选择需要的配置项在这里插入图片描述
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    ( ) Choose Vue Version //选择Vue版本 
    ( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 
    ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router(vue路由)
    ( ) Vuex // vuex(vue的状态管理模式)
    ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
    ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
    ( ) Unit Testing // 单元测试(unit tests)
    ( ) E2E Testing // e2e(end to end) 测试
    
    • 选择vue版本在这里插入图片描述

    • 路由是否使用history模式,选否的话则使用hash模式,两个模式最直观的区别就是hash模式带了一个很丑的#,而history模式没有在这里插入图片描述

    • 选择css预处理器,node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现
      在这里插入图片描述

    • 选择Eslint代码验证规则,即javascript代码检测工具
      在这里插入图片描述

    • 选择什么时候进行代码规则检测,保存即检测还是commit的时候检测
      在这里插入图片描述

    • 选择如何存放配置,存在在单独的配置文件中还是统一存放在package.json文件中 在这里插入图片描述

    • 是否保存当前配置 在这里插入图片描述

    • 若保存当前配置,为当前配置起一个别名
      在这里插入图片描述

    • 等待创建项目,按照提示命令启动项目
      在这里插入图片描述
      在这里插入图片描述

    • 验证项目是否创建成功
      在这里插入图片描述

    • 引入element-ui

      cnpm install element-ui -S
      在这里插入图片描述
      在这里插入图片描述

    展开全文
  • 一. 开发环境和工具的准备 ...·nodejs ·vuejs ·后端工具idea ·前端工具WebStorm 二. 数据库设计 create database fontandback use fontandback create table user( id int(10) primary key auto_increment, us...

    一. 开发环境和工具的准备
    ·jdk1.8
    ·maven
    ·mysql数据库
    ·Navicat
    ·nodejs
    ·vuejs
    ·后端工具idea
    ·前端工具WebStorm
    二. 数据库设计
    create database fontandback
    use fontandback
    create table user(
    id int(10) primary key auto_increment,
    username varchar(20),
    password varchar(20)
    )
    insert into user(username,password) values('admin','admin');

    三. 后端
    1.创建项目

    2.添加maven依赖

    <dependencies>
        <!--springboot核心,包括内嵌的tomcat,SpringMVC等-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--springboot核心-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <!--测试,包括Junit-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>
    </dependencies>


    3.配置application.properties

    #后端端口号
    server.port=8081
    #数据库的配置
    spring.datasource.url=jdbc:mysql://127.0.0.1:3306/fontandback?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = GMT
    spring.datasource.username=root
    spring.datasource.password=123456
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    #映射配置
    mybatis.type-aliases-package=com.example.frontandback.entity
    mybatis.mapper-locations=classpath:mapper/*Mapper.xml


    4.去除掉用不到的文件,最终的目录结构:

    5.User

    package com.example.frontandback.entity;

    public class User {

        private int id;
        private String username;
        private String password;

        private User(){

        }
        private User(int id,String username,String password){
            this.id = id;
            this.username = username;
            this.password = password;
        }

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public String getUsername() {
            return username;
        }

        public void setUsername(String username) {
            this.username = username;
        }

        public String getPassword() {
            return password;
        }

        public void setPassword(String password) {
            this.password = password;
        }

        @Override
        public String toString() {
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    '}';
        }
    }

    6.UserMapper

    package com.example.frontandback.mapper;

    import com.example.frontandback.entity.User;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    import org.springframework.stereotype.Component;

    @Mapper
    @Component("userMapper")
    public interface UserMapper {

        public User getUser(@Param("username")String username, @Param("password")String password);
    }

    7.UserMapper.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.example.frontandback.mapper.UserMapper">
        <select id="getUser" resultType="com.example.frontandback.entity.User">
            select * from user where username=#{username} and password=#{password}
        </select>
    </mapper>

    8.省略UserService。。。。。。。。。。。。
    UserServiceImpl

    package com.example.frontandback.service.impl;

    import com.example.frontandback.entity.User;
    import com.example.frontandback.mapper.UserMapper;
    import com.example.frontandback.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;

    @Service
    public class UserServiceImpl implements UserService {

        @Autowired
        UserMapper userMapper;

        @Override
        public User getUser(String username, String password) {
            return userMapper.getUser(username,password);
        }
    }

    9.SystemController

    package com.example.frontandback.controller;

    import com.example.frontandback.entity.User;
    import com.example.frontandback.service.impl.UserServiceImpl;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;

    @Controller
    public class SystemController {

        @Autowired
        UserServiceImpl userService;

        @RequestMapping(value="checkLogin")
        @ResponseBody
        public User checkLogin(@RequestParam("username")String username,
                               @RequestParam("password")String password){
            return userService.getUser(username,password);
        }
    }


    四. 前端

    生成的目录结构为

    直接在所给页面进行编写
    HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <form action="http://127.0.01:8081/checkLogin" method="post">
          <table align="center">
            <tr>
              <td>
                用户名:
              </td>
              <td>
                <input type="text" name="username"/>
              </td>
            </tr>
            <tr>
              <td>
                密码:
              </td>
              <td>
                <input type="password" name="password"/>
              </td>
            </tr>
            <tr>
              <td align="center" colspan="2">
                <input type="submit" value="提交"/>
                <input type="reset" value="重置"/>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>


    App.vue

    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>

    <script>

      import HelloWorld from './components/HelloWorld.vue'

    export default {
      name: 'app',
      components: {
        HelloWorld
      }
    }

    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>


    五. nginx
    此时前后端代码便写完了,分别运行前后端服务器。。。
    然后运行nginx
    nginx的配置:listen后面为切入端口号,第一个location配置的是前端的端口号,默认为8080,第二个location配置的是后端的端口号。
    进入解压出nginx的目录输入命令:start nginx.exe

    六. 运行结果

    展开全文
  • Vue+NodeJs前后端分离实现 1.创建Vue项目 使用vue-cli脚手架工具创建Vue项目 vue init webpack myapp 1 创建完成后 cd myapp 1 安装一些依赖 cnpm install --save axios 1 cnpm install --save ...

     

     

    Vue+NodeJs前后端分离实现

     

    1.创建Vue项目

    使用vue-cli脚手架工具创建Vue项目

    vue init webpack myapp
    
    • 1

    创建完成后

    cd myapp
    
    • 1

    安装一些依赖

    cnpm install --save axios 
    
    • 1
    cnpm install  --save stylus
    
    • 1
    cnpm install --save vue-loader
    
    • 1
    cnpm install --save css-loader
    
    •  

    在src/main.js
    添加

    import axios from 'axios'
    Vue.prototype.$axios = axios
    

    修改下端口号(之前有应用占用了8080端口了)
    在config/index.js修改端口号,修改port: 8080为 port: 8086

    2.前端Vue

    在src/components下创建一个user文件夹
    在文件夹下创建一个User.vue文件
    User.vue

    <template>
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>性别</th>
              <th>邮箱</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{user.id}}</td>
              <td>{{user.name}}</td>
              <td>{{user.sex}}</td>
              <td>{{user.email}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
      name: 'user',
      data () {
        return {
          data: '1',
          users: []
        }
      },
      created () {
        this.$axios({
          method: 'get',
          url: '/api/user'
        }).catch(error => {
          console.log('error:' + error)
        }).then(response => {
          this.users = response.data
          // console.log(this.users)
        })
      }
    }
    </script>
    
    <style scoped lang="stylus">
      table
        text-align: center
        background-color: blanchedalmond
    </style>
    
    

    在src/router/index.js中修改路由的方式为history并添加路由/user
    index.js

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

    2.后端nodejs

    在myapp文件夹下创建一个server文件夹
    安装依赖

    cnpm install express
    
    • 1
    cnpm install mysql
    
    • 1

    在server文件夹下创建以下文件
    数据库的连接文件
    db.js

    
    var mysql = {
      host: 'localhost',
      port: '3306',
      user: 'root',
      password: 'xxxxx',
      database: 'testnodejs'
    }
    module.exports = {mysql}
    
    

    api.js

    
    /* eslint-disable */
    
    var express = require('express')
    var router = express.Router()
    var models = require('./db')
    var mysql = require('mysql')
    var connection = mysql.createConnection(models.mysql)
    connection.connect()
    router.get('/user',function (req,res) {
        var users = []
        connection.query('select * from users',function (err,result) {
            if (err) throw err
            users = result
            res.end(JSON.stringify(users))
        })
    })
    router.get('/user/:id',function (req,res) {
        var user = {}
        connection.query('select * from users where id = ' + req.params.id,function (err,result) {
            if (err) throw err
            user = result
            res.end(JSON.stringify(user))
        })
    })
    router.get('/addUser/:name/:age/:email',function (req,res) {
        var sql = 'insert into users(name,age,email) values(?,?,?)'
        var user = {name: 'Mike',age:12,email:'1124245@qq,com'}
        var params = [req.params.name,req.params.age,req.params.email]
        connection.query(sql,params,function (err,result) {
            if (err) throw err
            console.log(result)
            res.end(JSON.stringify(result))
        })
    })
    router.get('/delUser/:id',function (req,res) {
        connection.query('delete  from users where id=' + req.params.id,function (err,result) {
            if (err) throw err
            res.end(JSON.stringify(result))
        })
    })
    router.get('/updateUser/:id',function (req,res) {
        connection.query('update users set name=? where id = ?',['LiMing',req.params.id],function (err,result) {
            if (err) throw err
            res.end(JSON.stringify(result))
        })
    })
    
    module.exports = router
    
    

    main.js

    /* eslint-disable */
    
    var express = require('express')
    var app = express()
    var api = require('./api')
    app.use('/api',api)
    var server = app.listen(8085,function () {
      var host = server.address().address
      var port = server.address().port
      console.log('Server has running at http://%s:%s',host,port)
    })
    
    

    在cmd切换到server目录输入

    node main.js
    
    •  

    在这里插入图片描述

    3.跨域解决

    这时候启动前端项目是不能访问的后端的api的,因为前后端不是同意url,前后端需要互相访问需要跨域
    跨域可以在前端配置,也可以在后端配置
    这里在前端设置
    在config/index.js在设置proxyTable
    在这里插入图片描述
    这时候再启动Vue项目,切换到myapp下cnpm run dev
    在这里插入图片描述
    访问http://127.0.0.1:8085/user
    在这里插入图片描述
    这样一个简单的Vue+Nodejs前后端案例就实现了

     

    展开全文
  • 一. 开发环境和工具的准备 ...nodejs vuejs 后端工具idea 前端工具WebStorm 二. 数据库设计 create database fontandback use fontandback create table user( id int(10) primary key auto_increment, username...
  • vue前后端分离项目搭建

    千次阅读 2018-12-25 16:09:09
    一, vue开发环境搭建 1, 开发工具 WebStorm或Visual Studio Code 2, 下载安装nodejs ## 后端开发环境 Eclipse + JDK + Tomcat 等不再赘述   二, vue测试项目搭建 1, 新建文件夹作为项目路径  E:\vueDemo ...
  • nodejs前后端分离

    千次阅读 2016-11-29 11:15:35
    nodejs前后端分离 nodejs来渲染页面 整个系统架构更加清晰
  • 通过 nginx + Tomcat 的方式,中间加一个 nodejs有效的进行解耦,并且前后端分离会为以后的大型分布式架构,弹性计算架构,微服务架构,多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IO...
  • Nodejs前后端分离

    2019-10-28 20:47:28
    这是使用nodejs前后端分离最大的好处。后端可以用 Java,.net,php 做,前端使用nodejs来渲染页面,前端工程师就可以有更大的空间,后端工程师也不用再和善变的页面打交道。 前端获取到数据后,使用 Node.js 来...
  • Vue CIL3 + NodeJS 前后端分离项目部署至Nginx服务器的流程 今天花费了很长一段时间来做这件事,踩了不少坑,网上也很少有这方面的案例,这里我就把我今天的部署流程进行详细的展列,步骤如下: 第一步 解决掉请求域...
  • 学会Spring Boot+Vue前后端分离开发 说明:本文从 B站 上面学习的Springboot+Vue 一些过程 仅供学习使用,如有错误 可提出。 安装Node.js https://nodejs.org/en/ 安装完: 安装cnpm: 淘宝镜像 npm ...
  • 【参考】IntellIJ IDEA 配置 Vue 支持 打开Vue项目 一、前端开发环境搭建  1.... 一般来说,要实现前后端分离,前端就需要开启一个本地的服务器来运行自己的前端代码,以此来模拟真实的线上...
  • 实用人群适合小白入门,高手请绕行技术栈javascript vuejs webpack babel eslint nodejs axiosphp mysql redisgit vagrant centos整体思路git负责版本控制,这个算是标配前台: 使用vuejs框架,用javascript语言打造...
  • Django+vue前后端分离项目的跨域问题 部门项目本地开发后会远程部署,此方法不再适用,需要支持请求地址更改方便。查了可以在vue.config.js里配置proxy解决此问题 配置后报错Proxy error: Could not proxy request ...
  • springcloud+vue 前后端分离

    万次阅读 2018-08-31 09:43:55
    springcloud-hichat(前后端分离)   一个简单的移动web聊天室,做这个小项目主要是想体验当今时代的一些新潮的技术,尤其是springcloud和vue,所以里面用到的东西是挺多的。 该项目分为:用户移动web端和后台...
  • springBoot+Vue前后端分离权限内容管理CMS系统hrcms源码地址目录后端:前端:搭建步骤鸣谢特点面向对象开发环境技术交流后端截图前端截图免责声明: hrcms 基于springBoot框架的内容管理系统,采用最新最主流的技术...
  • 1.首先下载node.js,nodejs官网https://nodejs.org/zh-cn/download/,根据自己操作系统选择合适的下载 2.window 的msi安装包 直接双击点击下一步 下一步就行 安装组件默认npm 和path环境变量都会配置好 3.安装...
  • 其中前端项目使用 Vue.js,这个项目将会用到vue,vuex,vue-route,axios,elementUI 等 后端项目使用为 3 个项目,其中涉及Spring Boot, Mybaits, Flask 等 中间会穿插一些运维的知识如常用linux命令, Jenkins 等 ——...
  • 个人博客网站摘要一、绪论1.1 课题背景、目的、意义1.2 国内外研究现状1.3 技术介绍1.3.1 Spring Boot1.3.2 MyBatisPlus1.3.3 Shiro1.3.4 Redis1.3.5 Jwt1.3.6 Vue1.3.7 Element-ui1.3.8 Axios1.3.9 前后端分离二、...
  • 作者:@nele ...介绍常规的开发方式MVVMSPA(Single Page Application)Spring Boot + Vue 使前后端分离Show Code后端搭建vue项目搭建在spring boot 引入静态文件 介绍 最近在工作中做个新项目,后端...
  • 讲课的是mac 1.安装多个版本的go 2.查看新安装的go 3.... npm uninstall -g vue-cli npm install -g @vue/cli vue create ginandvue 5.window创建项目 手动 6.vscode 安装Es lint =>代码规范 格式化代码 ...
  • 1. 项目所需环境 Java: JDK1.8以上版本 Maven: apache-maven-3.5.4 服务器框架:Spring-boot+Mybatis 前端框架:Vue.js v2.6 服务器开发工具:IntelliJ IDEA 2019.1 x...2. 后台环境搭建(IntelliJ IDEA)...
  • [项目练手笔记-谷粒商城]day01环境搭建 本项目是基于尚硅谷教程**2020微服务分布式电商项目《谷粒商城》**设计,感谢尚硅谷的用爱发电,视频链接 一、环境搭建 1.系统准备 本次实习使用的是centos7系统,阿里云...
  • 这一节着重讲讲Vue node.js安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。Node 是一个让 JavaScript 运行在服务端的开发平台,它让 ...
  • 旅游管理系统 自己在跟着视频学习完SSM,SpringBoot时,感觉不实践一下所学的知识一直停留在学习理论阶段,没有真正的会用在项目中,自己一直坚信实践是检验知识学习...前后端分析:axios、json 前端技术栈:Vue、node
  • 最近出于爱好,写了个音乐播放器的微信小程序(原本想用vue写的,后来因为公司业务原因,年后可能去做微信小程序,所以就换了前端技术栈),源码在我的GitHub上: wx-audio 。 思考:后端出于性能和别的原因,提供...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,812
精华内容 1,124
关键字:

nodejsvue前后端分离搭建

vue 订阅