nodejs安装

安装：

nodejs官网地址：https://nodejs.org/en/

安装node.js，安装路径我默认安装在C盘  ，可以改变路径

安装配置全局安装路径和缓存

现在配置全局模块的安装路径到node-global文件夹，npm缓存到npm-cache文件夹

默认是会在C盘  我们给它换成其他盘

我是在D:\Nodejs目录下创建了node_cache和node_global文件夹

打开一个cmd 窗口    输入命令

npm config set prefix "D:\Nodejs\node_global"npm config set cache "D:\Nodejs\node_cache"

配置node的环境变量

在系统变量里新增NODE_PATH 值为刚刚设置node_global路径  加一级node_modules目录(会自动创建)下载的全局东西会放这里面！

2.检查nodejs安装状态：

Node -vNpm -v//将npm跟新到最新状态npm -g install npm//安装npm的国内镜像cnpm(本人建议使用cnpm)npm install -g cnpm --registry=https://registry.npm.taobao.org//安装脚手架npm install -g vue-cli至此nodejs安装与配置完成Cmd创建vue项目：Cd命令切换到项目的工作空间//生成项目vue init webpack 项目名名按照提示完成项目创建项目生成之后，切换到项目吗目录//启动项目npm run dev

Idea创建vue项目：

点击 Create New Project然后选择 Static Web -> Vue.js，点击 next

输入相关参数这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next

等待 Vue CLI 初始化，然后在可视化界面上确认项目信息，修改或 Next 即可

IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行 npm install运行完成后，输入 npm run dev 即可。

我们还可以在 package.json 文件上点击右键，选择 show npm scripts然后就会出来 npm 命令窗口

前端登陆页面的开发与路由配置：

1.Login.vue

右键 src\components 文件夹，New -> Vue Component，命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。代码如下：

<template>  <div>      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>      <br><br>      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>      <br><br>      <button v-on:click="login">登录button>  div>template><script>  export default {    name: 'Login',    data () {      return {        loginForm: {          username: '',          password: ''        },        responseResult: []      }    },    methods: {      login () {        this.$axios          .post('/login', {            username: this.loginForm.username,            password: this.loginForm.password          })          .then(successResponse => {            if (successResponse.data.code === 200) {              this.$router.replace({path: '/index'})            }          })          .catch(failResponse => {          })      }    }  }script>

标签中随便写了一个登录的界面， methods 中定义了登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。因为之前我们设置了默认的 URL，所以请求实际上发到了 http://localhost:8443/api/login。

2.AppIndex.vue

右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个 Appindex.vue ，即首页组件，这里暂时不做过多开发，先随便写个 Hello World。

<template>    <div>      Hello World!    div>template><script>  export default {    name: 'AppIndex'  }script><style scoped>style>

3.设置反向代理

修改 src\main.js 代码如下：

import Vue from 'vue'import App from './App'import router from './router'// 设置反向代理，前端请求默认发送到 http://localhost:8443/apivar axios = require('axios')axios.defaults.baseURL = 'http://localhost:8443/api'// 全局注册，之后可在其他组件中通过 this.$axios 发送数据Vue.prototype.$axios = axiosVue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: ''})

因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。

4.配置页面路由

修改 src\router\index.js 代码如下

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import AppIndex from '@/components/home/AppIndex'import Login from '@/components/Login'Vue.use(Router)export default new Router({  routes: [  // 下面都是固定的写法    {      path: '/login',      name: 'Login',      component: Login    },    {      path: '/index',      name: 'AppIndex',      component: AppIndex    }  ]})

5.为了让后端能够访问到前端的资源，需要配置跨域支持。

在 config\index.js 中，找到 proxyTable 位置，修改为以下内容

proxyTable: {      '/api': {        target: 'http://localhost:8443',        changeOrigin: true,        pathRewrite: {          '^/api': ''        }      }    }

注意如果不是在最后的位置，大括号外需要添加一个逗号。

运行项目

执行 npm run dev，或双击 dev(start 也一样)脚本，查看登录页面效果。

注意地址是 localhost:8080/#/login ，

jdk安装与配置：

官网https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html

先打勾

然后下载

安装时注意你的路径(建议安装的时候，使用默认路径就行)

等JDK安装好了后，还会安装JRE(注意：jdk11没有这个目录了)，建议让JRE的安装目录与JDK在一个文件夹中，所以更改目录到D:\JAVA

你会看到jdk与jre(注意：jdk11没有这个目录了)都在D盘Java文件夹下,然后就完成了

然后完成就添加环境变量：

右键我的电脑--------属性------

此时你可以设置，用户的环境变量，也可以设置系统的环境变量

如果设置用户的环境变量，则只能这个用户可以使用，其他用户用不了。

如果设置系统的环境变量则此电脑的每个用户均可使用。

然后新建PATH，设置变量值

%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

新建CLASSPATH，设置变量值

.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

注意前面的.表示当前目录。然后点击“确定”按钮。(注意前面有一个点)

在cmd中输入java或者javac试试看

这个说明成功了

Mysql8安装与配置

1、下载(官方推荐的是下载安装版本，但是解压版更便捷)：

2、解压，我们需要增加一步操作：

(1)创建一个名为my.ini的文件：

修改my.ini文件：

[mysql]# 设置mysql客户端默认字符集default-character-set=utf8[mysqld]# 设置3306端口port = 3306# 设置mysql的安装目录basedir = D:\\Program Files\\mysql\\# 设置mysql数据库的数据的存放目录datadir = D:\\Program Files\\mysql\\data# 允许最大连接数max_connections=20# 服务端使用的字符集默认为8比特编码的latin1字符集character-set-server=utf8# 创建新表时将使用的默认存储引擎default-storage-engine=INNODB# 创建模式sql_mode = NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES

特别要注意：

(1)D:\\Program Files\\mysql\\data 这个目录一定要是“\\”，千万别弄成“\”不然会报错，或者可以用“/”；(2)Mysq安装目录和数据存放目录一定要修改为你自己设定的目录，除非你设置的目录与上述一致。

4、配置mysql的环境变量：

MYSQL_HOME

D:\Program Files\mysql

点击Path，增加：

%MYSQL_HOME%\bin;

5、以管理员身份运行cmd，执行以下操作：

(1)切换到mysql的bin目录；(2)执行mysqld --initialize命令，此时会生成一个新目录data，查看.err文件，可以看到root用户生成的随机密码；

mysqld --initialize

(3)执行mysqld --install命令，安装mysqld服务；

mysqld --install

(4)执行net start mysql命令，启动mysql服务；

net start mysql

(5)执行mysql -u root -p命令，连接mysql数据库，输入上述随机生成的密码；

mysql -u root -p

(6)执行以下sql重置root密码：

mysql> alter user 'root'@'localhost' identified with mysql_native_password by '新密码';

tips：

mysqld –initialize-insecure自动生成无密码的root用户；

mysqld –initialize自动生成带随机密码的root用户；

mysqld -remove移除自己的mysqld服务；

net stop mysql命令，停止mysql服务

如果报错，清空data文件夹，最好还是删掉data文件，重新执行remove--initialize--install--start(这些不是命令)流程即可；

注意：此处已经做了一键安装盘的exe应用程序，安装就会自动将jdk、tomcat、mysql安装配置成功(具体操作间微信公众姚前述)

搭建后台：

这个就很简单了。在 IDEA 中新建项目，选择 Spring Initializr，点击 Next输入项目元数据，Next选择 Web -> Web，Next最后是项目名称和项目地址，Finish 后等待项目自动初始化即可。运行 Application.java访问 http://localhost:8080，发现弹出了错误页面，OK，这就对了，因为我们啥页面都没做啊。

---end