开源项目学习-V部落

开源项目-V部落

github  --   https://github.com/lenve/VBlog

一、前期工作(此处只是展示如何开启前后端工程)：

1. IDEA创建Springboot工程

工程名：v-springboot

2. VSCode创建Vue-cli3工程

1) node.js安装

2) 安装vue-cli3脚手架

• npm install -g @vue/cli

3) 安装vue-cli服务

• npm install -g @vue/cli-service-global

4) 创建v-vue工程 

• vue create my-project
• 若出现错误：管理员运行powershell并设置set-ExecutionPolicy RemoteSigned为true

二、登录模块

1. 前端工作流程

启动前端和后端，前端初始化地址：

http://localhost:8080/

首先看前端的路由地址，位于router(对用的插件--vue-router)下的index.js：

{
  path: '/',
  name: '登录',
  hidden: true,
  component: Login
}

前端是如何先到登录的这个路由的呢？如下图：

1) 前端命令

npm run dev

对应的脚本命令

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

因此对应的基本配置为：

build/webpack.dev.conf.js

看此具体配置

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')  // 合并配置的
// dev和pro通用的配置
// 1. entry: 入口，此处指定了这个程序的启动入口：./src/main.js
// 2. output: 出口，根路径下的index.js
// 3. resolve: 配置 Webpack 如何寻找模块所对应的文件，文件拓展后缀
// 4. module: 模块系统，rules：一些资源匹配的必要规则
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

// 根据 process.env.HOST 的值判断当前是什么环境
// 命令：npm run build -- test ，process.env.HOST就设置为：'test'
const HOST = process.env.HOST
// 端口号
const PORT = process.env.PORT && Number(process.env.PORT)

// 开发环境的基本配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    // 新增的css匹配规则
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  // 跨域的一些配置
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    // 设置环境变量插件，主要是dev和pro的切换
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    // 热更新插件
    new webpack.HotModuleReplacementPlugin(),
    // HMR shows correct file names in console on update.
    new webpack.NamedModulesPlugin(), 
    // 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // 可以生成创建html入口文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
  ]
})
// Promise解决回调地狱问题
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      // 识别某些类别的webpack错误，并清理，聚合和优先级
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

2) 前端登录模块发出请求，后端才会根据请求地址传回数据

Login.vue：使用element-ui模板进行登录页面的开发

axios：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

在./utils/api.js定义Restful请求处理规则：get、post、delete、put

methods: {
  submitClick: function () {
    var _this = this;
    this.loading = true;
    postRequest('/login', {
      username: this.loginForm.username,
      password: this.loginForm.password
    }).then(resp=> {
      _this.loading = false;
      if (resp.status == 200) {
        //成功
        var json = resp.data;
        if (json.status == 'success') {
          _this.$router.replace({path: '/home'});
        } else {
          _this.$alert('登录失败!', '失败!');
        }
      } else {
        //失败
        _this.$alert('登录失败!', '失败!');
      }
    }, resp=> {
      _this.loading = false;
      _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
    });
  }
}

2. 后端接受请求进行处理并返回数据

前端输出用户名与密码后，请求地址：localhost:8081/login

先认识一下springboot中的websecurityconfig中的formLogin配置

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable() //禁用跨站csrf攻击防御，后面的章节会专门讲解
            .formLogin()
                .loginPage("/login.html")//用户未登录时，访问任何资源都转跳到该路径，即登录页面
                .loginProcessingUrl("/login")//登录表单form中action的地址，也就是处理认证请求的路径
                .usernameParameter("uname")///登录表单form中用户名输入框input的name名，不修改的话默认是username
                .passwordParameter("pword")//form中密码输入框input的name名，不修改的话默认是password
                .defaultSuccessUrl("/index")//登录认证成功后默认转跳的路径
                .and()
            .authorizeRequests()
                .antMatchers("/login.html","/login").permitAll()//不需要通过登录验证就可以被访问的资源路径
                .antMatchers("/biz1").hasAnyAuthority("biz1")  //前面是资源的访问路径、后面是资源的名称或者叫资源ID
                .antMatchers("/biz2").hasAnyAuthority("biz2")
                .antMatchers("/syslog").hasAnyAuthority("syslog")
                .antMatchers("/sysuser"