VBlog项目代码理解之前端

最新推荐文章于 2024-08-13 08:45:42 发布
最新推荐文章于 2024-08-13 08:45:42 发布
阅读量1.3k 收藏 8
点赞数 5
分类专栏： 项目经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mceason/article/details/108022287
版权
本文介绍了VBlog项目的前端代码，包括资源、配置问题和组件详细讲解。重点讨论了如何通过配置解决跨域，路由控制页面跳转，API调用后端方法，以及登录验证、主页面、文章列表、博客详情等关键组件的工作原理。此外，还涵盖了Vue组件的交互，如登录验证、下拉框、分页功能和过滤器的使用。
摘要由CSDN通过智能技术生成

文章目录

VBlog项目代码理解之前端

资源

项目地址
前后端交互理解
后端代码理解
推荐：整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI，没有用到Redis、RabbitMQ等内容，很适合刚学完SpringBoot和Vue的同学练手，感谢作者！帮作者打个广告吧~
在这里插入图片描述
PS：这是本人第一个学习的项目，难免会有错误的地方，哪里有问题烦请指正，感谢！

配置问题

解决前后端交互、跨域、页面跳转等问题

config/index：通过代理解决跨域问题

  • 核心内容就是proxyTable，这块根据SpringBoot的配置来配置，具体内容都在注释里了。
  • config/index.js参数详解
'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.

// 这个不知道有啥用
const path = require('path')

// 话说这边并没有用env: require()来指定环境啊
module.exports = {
   
  // 管开发的时候，既有前后端交互的跨域配置，也有在前端玩的配置
  dev: {
   
    // Paths
    // 静态资源子目录和公开地址
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 这边是设置代理，解决跨域问题，开发的时候才用
    proxyTable: {
   
      // 路径啥也不加
      '/': {
   
        // 改写，相当于把http://localhost:8080改成下面的内容+/
        target: 'http://localhost:8081',
        changeOrigin: true, // 指示是否跨域
        pathRewrite: {
   
          '^/': ''  // 啥都没有，就等价于http://localhost:8081/
        }
      }
    },

    // 这边是前端自己玩
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST

    // dev-server的端口号
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'eval-source-map',


    // debug工具出问题的时候可以试试改为false，可能会有用
    cacheBusting: true,


    // 是否生成css、map文件，说可能存在问题，但是没啥必要用这个，出问题了可以控制台
    // 所以这里于默认不同，设为false
    cssSourceMap: false,

  },
  // 配置build、打包问题
  // 这一套很固定，根本不用动，创建完了就是这样的
  build: {
   
    // 这块好像都是说运行npm run build之后，生成的文件应在的位置
    // build之后生成的index位置？
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    // 静态资源的根目录
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 静态资源子目录
    assetsSubDirectory: 'static',
    // 静态资源的公开路径，也就是真正的引用路径(引用路径指使用时？)
    assetsPublicPath: '/',

    /**
     * Source Maps
     */
    // 是否生成生产环境的sourcemap，sourcemap用来对编译后的文件进行debug，方法是映射回编译前的文件
    // 编译后的代码人是看不懂的
    productionSourceMap: true,

    // 这应当是一种映射工具
    devtool: '#source-map',


    // 是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    productionGzip: false,
    // 指定要压缩的文件类型
    productionGzipExtensions: ['js', 'css'],


    // 开启编译完成后的报告，只有运行了npm run build --report才有吧
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

router：页面跳转控制

  • 所有的跳转都通过路由控制，在router/index.js文件中配置，path可以通过children设置子路径，如果有多个子模块，就会变成可选模式。
  • 同时每个路径都绑定了component，子路径的component会在父路径的组件的<router-view>位置显示，所以路径的跳转本质上就是组件的不同组合。
  • 还可以配置一些信息，如组件名字、是否隐藏、保持激活等内容。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import ArticleList from '@/components/ArticleList'
import CateMana from '@/components/CateMana'
import DataCharts from '@/components/DataCharts'
import PostArticle from '@/components/PostArticle'
import UserMana from '@/components/UserMana'
import BlogDetail from '@/components/BlogDetail'
import Doex from '@/components/Doex'

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: '登录',
      hidden: true,
      component: Login
    }, {
   
      path: '/home',
      name: '',
      component: Home,
      hidden: true
    }, {
   
      path: '/home',
      component: Home,
      name: '文章管理',
      iconCls: 'fa fa-file-text-o',
      children: [
        {
   
          path: '/articleList',
          name: '文章列表',
          component: ArticleList,
          meta: {
   
            keepAlive: true
          }
        }, {
   
          path: '/postArticle',
          name: '发表文章',
          component: PostArticle,
          meta: {
   
            keepAlive: false
          }
        }, {
   
          path: '/blogDetail',
          name: '博客详情',
          component: BlogDetail,
          hidden: true,
          meta: {
   
            keepAlive: false
          }
        }, {
   
          path: '/editBlog',
          name: '编辑博客',
          component: PostArticle,
          hidden: true,
          meta: {
   
            keepAlive: false
          }
        }
      ]
    }, {
   
      path: '/home',
      component: Home,
      name: '用户管理',
      children: [
        {
   
          path: '/user',
          iconCls: 'fa fa-user-o',
          name: '用户管理',
          component: UserMana
        }
      ]
    }, {
   
      path: '/home',
      component: Home,
      name: '栏目管理',
      children: [
        {
   
          path: '/cateMana',
          iconCls: 'fa fa-reorder',
          name: '栏目管理',
          component: CateMana
        }
      ]
    }, {
   
      path: '/home',
      component: Home,
      name: '数据统计',
      iconCls: 'fa fa-bar-chart',
      children: [
        {
   
          path: '/charts',
          iconCls: 'fa fa-bar-chart',
          name: '数据统计',
          component: DataCharts
        }
      ]
    }, {
   
      path: '/home',
      component: Home,
      name: '身体记录',
      iconCls: 'el-icon-date',
      children: [
        {
   
          path: '/doex',
          iconCls: 'el-icon-date',
          name: '身体记录',
          component: Doex
        }
      ]
    }
  ]
})

utils/api.js：调用后端方法并接受返回值

关于两种不同的Content-Type:

  • application/x-www-form-urlencoded会对参数进行编码，键值对参数用&连接，空格转换为+，有特殊符号就转换为ASCII HEX值。然后这个类型就是编码格式，也是浏览器默认的编码格式。如果是Get请求，就将参数转化成?key=value&key=value的格式接在url后面。
  • multipart/form-data不会进行编码，使用分割线来相当于&。常用于文件等二进制，也可以用于键值对参数。
  • application/json也经常使用。
  • 两种post接口的解读

四种常用请求含义：

  • Get（SELECT）：从服务器查询，可以在服务器通过请求的参数区分查询的方式。
  • POST（CREATE）：在服务器新建一个资源，调用insert操作。
  • PUT（UPDATE）：在服务器更新资源，调用update操作。
  • DELETE（DELETE）：从服务器删除资源，调用delete语句。
import axios from 'axios'
// base意义是啥
let base = '';
// 这些要在component用到的时候import
export const postRequest = (url, params) => {
   
  return axios({
   
    method: 'post',
    url: `${
     base}${
     url}`,
    data: params,
    transformRequest: [function (data) {
   
      // 这边就是参数传递的标准表达式了
      let ret = ''
      for (let it in data) {
   
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
   
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const uploadFileRequest = (url, params) => {
   
  return axios({
   
    method: 'post',
    url: `${
     base}${
     url}`,
    data: params,
    headers: {
   
      'Content-Type': 'multipart/form-data'
    }
  });
}
export const putRequest = (url, params) => {
   
  return axios({
   
    method: 'put',
    url: `${
     base}${
     url}`,
    data: params,
    transformRequest: [function (data) {
   
      let ret = ''
      for (let it in data) {
   
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
   
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const deleteRequest = (url) => {
   
  return axios({
   
    method: 'delete',
    url: `${
     base}${
     url}`
  });
}
export const getRequest = (url,params) => {
   
  return axios({
   
    method: 'get',
    data:params,
    transformRequest: [function (data) {
   
      let ret = ''
      for (let it in data) {
   
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
   
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    url: `${
     base}${
     url}`
  });
}

filter_utils：过滤器

  • 在一个单独的文件中定义过滤器，使用方法是{ { 值 | 过滤器函数名}}
    过滤器的定义：
import Vue from 'vue'
// 定义全局过滤器，在main.js中导入
Vue.filter("formatDate", function formatDate(value) {
   
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  if (month < 10) {
   
    month = "0" + month;
  }
  if (day < 10) {
   
    day = "0" + day;
  }
  return year + "-" + month + "-" + day;
});
Vue.filter("formatDateTime", function formatDateTime(value) {
   
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  if (month < 10) {
   
    month = "0" + month;
  }
  if (day < 10) {
   
    day = "0" + day;
  }
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
});

main：导入依赖

导入使用的外部组件，如ElementtUI、VCharts，还有过滤器也是在这里导入的。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import './styles/element-variables.scss'
import 'font-awesome/css/font-awesome.min.css'
// 再次导入了过滤器
import './utils/filter_utils.js'
import VCharts from 'v-charts'

Vue.use(ElementUI)
Vue.use(VCharts)

Vue.config.productionTip = false;
window.bus = new Vue();
new Vue({
   
  el: '#app',
  router,
  template: '<App/>',
  components: {
   App}
})

组件

  • 最核心的部分，通过各种组件的组合、跳转来实现页面的展示。

Login：登录与权限验证

  • 登录页面是Login，两个输入框绑定rules校验规则，绑定方法是el-form的:rules，然后通过prop关联rules中的性质。
  • 然后登录按钮绑定了方法，传递地址为后端的spring security的/login/{username, password}，执行后判断

v:onclick.nativa.prevent:“方法名”:

  • 给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件
  • 但父组件想在子组件上监听自己的click的话，需要加上native修饰符，故写法就像上面这样。
  • prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()

auto-complete=“off”:
autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注意：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

完整代码：

<template>
  <!--v-bind:rules，是绑定一些数据？答：是绑定校验规则，通过prop的方法使用rules的校验规则-->
  <!--所有的class都可以在下面设置style-->
  <el-form :rules="rules" class="login-container" label-position="left"
           label-width="0px" v-loading="loading">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="account">
      <!--输入用户名，关闭了自动提示。-->
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <!--注意这个prop，这是用来设置校验规则的，-->
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <!--这个左右对齐好像没差别-->
    <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <!--v:on绑定自定义方法-->
      <el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<!--调用utils/api里面的HTTP传递方法-->
<script>
  import {
   postRequest} from '../utils/api'
  import {
   putRequest} from '../utils/api'
  export default{
   
    data(){
   
      // 下面这些值会传递给上边
      // 这个return是要传给后端码？
      return {
   
        // rules：规则，校验规则
        rules: {
   
          // 跟上面的prop绑定的，触发器为失去焦点
          account: [{
   required: true, message: '请输入用户名', trigger: 'blur'}],
          checkPass: [{
   required: true, message: '请输入密码', trigger: 'blur'}]
        },
        // 默认被选择
        checked: true,
        // 默认文本内容，因为由v-model，所以会显示
        loginForm: {
   
          username: 'sang',
          password: '123'
        },
        loading: false
      }
    },
    methods: {
   
      submitClick: function () {
   
        var _this = this;
        // 改变参数
        this.loading = true;
        // 方法里用的axios，第一个参数是url，第二个是参数
        // 方法通往Spring security的权限管理
        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('找不到服务器⊙﹏⊙∥!', '失败!');
        });
      }
    }
  }
</script>
<!--给绑定的class设置style-->
<style>
  .login-container {
   
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
   
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
   
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>

Home：主页面框架


登录成功就来到Home。

v-if="!item.hidden"：
通过hidden来控制是否显示

slot=“title”：是系统自带的吗，找不到东西

Breadcrumb 面包屑：
el-breadcrumb作用显示当前页面的路径，快速返回之前的任意页面，之前的页面用el-breadcrumb-item表示
可以控制最上面的导航，加了点东西就变成下一行了

激活判断：
代码中可以根据keep-alive参数来决定子组件显示的位置

          <!--根据激活状态判断在哪里显示-->
          <keep-alive>
            <div>
              {
   {
   '激活'}}
            </div>
            <router-view v-if="this.$route.meta.keepAlive"></router-view>
          </keep-alive>
          <div>
            {
   {
   '未激活'}}
          </div>
          <router-view v-if="!this.$route.meta.keepAlive"></router-view>

通过:index来绑定路径path

              <!--但是这个怎么跳转呢?-->
              <!--index这里绑定了path, 为啥index绑定了就能跳?是因为el-menu-item的特性?-->
              <el-menu-item :index="item.children[0].path">
                <i :class="item.children[0].iconCls"></i>
                <span slot="title">{
   {
   item.children[0].name}}</span>
              </el-menu-item>

登录声明：
通过一个钩子函数触发，当转到该页面的时候，会调用

    // 钩子函数,转到的时候触发
    mounted: function () {
   
      this.$alert('为了确保所有的小伙伴都能看到完整的数据演示，数据库只开放了查询权限和部分字段的更新权限，其他权限都不具备，完整权限的演示需要大家在自己本地部署后，换一个正常的数据库用户后即可查看，这点请大家悉知!', '友情提示', {
   
        confirmButtonText: '确定',
        callback: action => {
   
        }
      });
      var _this = this;
      getRequest("/currentUserName").then(function
最低0.47元/天 解锁文章
KirutoCode
关注
专栏目录
VBlog项目代码理解之后端
给时光以生命
08-15 850
文章目录VBlog项目代码理解之后端资源BeanMapperServiceConfig：登录Spring Security配置ControllerResources：配置文件与前端资源 VBlog项目代码理解之后端 资源 项目地址 前后端交互代码理解 前端代码理解 推荐：整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI，没有用到Redis、RabbitMQ等内容，很适合刚学完SpringBoot和Vue的同学练手，感谢作者！帮作者打个广告吧~ PS：这是本人第一个学
VBlog:一个基于Vue的简单博客项目
05-10
VBlog 简介 VBlog 是我个人开发的博客框架，受启发于hexo 和 vue ，使用了vue-cli 的 webpack 配置代码 ，部分原理模仿 hexo 。也有许多与hexo 不同之处。 项目地址： 安装 以下提供两种方式： 方式 1： git clone # clone this project git clone https://github.com/LqqJohnny/VBlog.git # then install dependencies cd VBlog && npm install # serve with hot reload at localhost:8000 npm run dev 方式 2 ( 推荐 )： vblog-cli # install vblog-cli : https://github.com/LqqJohnny/vblog-cli npm
VBlog 的代码结构, 使用 vue-element, vue-vant 组件开发的纯前端博客
05-16 242
介绍 VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客 这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构 这是之前发的一个如何快速部署 VBlog 的帖子 https://www.v2ex.com/t/454125#reply6 项目地址 https://git...
VBlog 开源项目实战指南
最新发布
gitblog_00139的博客
08-13 241
VBlog 开源项目实战指南 VBlog使用GitHub API 搭建一个可动态发布文章的博客项目地址:https://gitcode.com/gh_mirrors/vbl/VBlog 项目介绍 VBlog 是一个基于 GitHub 平台实现的个人博客系统，由 @GitHub-Laziji 开发并维护。该项目旨在提供一个简单易用、轻量级的博客搭建解决方案，让开发者能够轻松地在 GitHub 上部...
前端项目 --- 博客系统
wwzzzzzzzzzzzzz的博客
05-08 9121
文章目录1. 博客系统1.1 导航栏1.2 博客主页界面1.3 博客详情界面1.4 博客登陆界面1.5 博客编辑界面 1. 博客系统 本博客分为四个页面 博客登录界面 博客主页界面 博客编辑界面 博客详情界面 1.1 导航栏 可以看出文章界面中都有共同的导航栏. 导航栏的前端代码: <div class="nav"> <img src="../image/头像.jpg" alt="头像"> <span clas
博客系统前端（页面设计）
qq_57574258的博客
12-26 1592
预期设计页面 博客列表页 博客正文页 博客登陆页 博客编辑页 所有页面公用的css代码 common.css *{ margin:0; padding:0; box-sizing: border-box; } /* 设置整体页面高度 */ html,body{ height:100%; background-image: url("../img/02.jpg"); background-position: center center; backgr
记录从前端到后端--博客项目
weixin_34257076的博客
11-20 75
mongodb学习笔记 1.下载：http://www.mongodb.org/downloads 2.安装 3.启动mongodb 3.1mongod 设置数据库路径 mongod --dbpath 路径 3.2 连接数据库 mongo 使用mongo服务时不能关闭mongodb进程，并且因为mongodb不是服务所以每次开机都得执行一次，如果不想每次开机都执行一次可以将mongodb弄成服务。...
VBlog个人博客系统 v3.0
03-23
欢迎使用V_bolg3.0版本 此博客程序经过网友发到网站上面去,几手修改诞生了今天的3.0版本,个人名誉程序保证,无****! 在安全方面本人经过3次本地测试,shell安全完全保证; ...2.数据库配置文件希望大家看好,避免别人下载...
VBlog:springBoot + vue个人博客系统
03-11
项目还有许多待改进的地方，欢迎小伙伴提交pr，我可以大家完成的工作展示在README中！ 项目效果图 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 初步技术栈 初步主要采用了： 1，SpringBoot 2，...
v-blog:一个博客demo,简单的增删查改功能 (数据库用的野狗)
05-15
博克 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
VBlog：V部落，Vue + SpringBoot实现的多用户博客管理平台！
02-19
V部落姊妹篇： : V部落是一个多用户博客管理平台，采用Vue + SpringBoot开发。 项目演示地址：http: : 英雄帖 项目还有许多待改进的地方，欢迎小伙伴提交pr，我可以大家完成的工作展示在README中！ 项目效果图 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 初步技术栈 初步主要采用了： 1，SpringBoot 2，SpringSecurity 3，MyBatis 4.部分接口预设Restful风格5，MySQL 前端技术栈 前端主要采用了： 1.Vue 2.axios 3.元素UI 4，vue-echarts 5.编辑6.vue路由器 还有其他一些琐碎的技术我就不在这里一一双人床了。 快速运行 1.克隆本项目到本地 git@github.com:len
基于springboot的博客项目
12-12
基于springboot的博客项目，内带SQL文件，导入即可使用。特性：访客，可以分页查看所有的博客，可以用关键字全局搜索博客，可以快速查看最新的推荐博客，可以查看单个博客内容，可以对博客内容进行评论，可以赞赏博客内容，可以在首页扫描公众号二维码关注我。管理员，可以用户名和密码登录后台管理，可以管理博客，可以管理博客分类，可以管理标签。
VBlog：使用GitHub API构建一个可动态发布文章的博客
02-04
博客 目录 简介 博客可构建在GitHub Pages上，文章数据存储于gist中，通过Github API与数据进行交互，实现无后台，可动态发布文章的博客系统 最近暂无更新计划 演示地址 项目特点 基于GitHub Pages无需服务器 改进传统GitHub Pages不能动态发布的缺陷 包含电脑端和移动端 单页应用 使用的组件 元素（电脑端） Vant（移动端） 项目截图 快速使用 建造博客只需2步 点击github旁边旁边的“ +”号选择Import repository库克隆地址填https://github.com/GitHub-Laziji/GitHub-Laziji.githu
Vblog:现代化的多用户Markdown博客系统
05-26
博客 现代化的多用户Markdown博客系统。 使用React JS，Spring Boot和Spring Security构建。 这个博客系统正在开发中，它仍然包含许多错误和缺少的功能。 特征 现代水疗设计 多用户 用户个人博客首页 实时降价编辑 标签和类别支持 i18n支持 跑步 克隆项目 git clone git@github.com:VirgilChen97/Vblog.git 运行后端服务 cd vblog-server mvn spring-boot:run 运行前端服务 cd ../vblog-ui npm start 去做 图片上传 用户设定允许用户更改应用栏颜色，代码突出显示主题等 用户反馈用户界面中的许多元素缺少适当的用户反馈 用户友好的标签编辑器
VBlog 的代码结构, 使用 element, vant 组件开发的纯前端博客
weixin_34104341的博客
05-17 840
介绍 VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客 文章主要是介绍一下 VBlog 的原理, 使用的组件和代码结构 如何快速部署 VBlog https://segmentfault.com/a/1190000014879081 项目地址 https://github.com/GitHub-Laziji/vblog ...
前端开发常用的代码合集
weixin_45466923的博客
12-13 2700
js打印日志 console.log("原始数据：",data); js生成uuid // 生成uuid function uuid(){ var s = []; var hexDigits = "0123456789abcdef"; for(var i = 0;i<36;i++){ s[i] = hexDigits.substr(Math.floor(Math.random()...
VBlog项目代码理解之前后端交互
给时光以生命
08-15 427
VBlog项目代码理解之前后端交互 资源 项目地址 前端代码理解 后端代码理解 推荐：整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI，没有用到Redis、RabbitMQ等内容，很适合刚学完SpringBoot和Vue的同学练手，感谢作者！帮作者打个广告吧~ PS：这是本人第一个学习的项目，难免会有错误的地方，哪里有问题烦请指正，感谢！ 前后端交互 跨域：使用前端的config/index.js来解决开发时的跨域问题。 权限验证：使用Spring Securit
SNS驱动的个性化中文全文索引提升VBlog精准营销
本文主要探讨了个性化中文全文索引技术在VBlog项目中的应用，针对电信行业的号码百事通业务进行深入研究。随着用户数量的规模化增长和精确营销的需求提升，运营商需要更好地理解用户群体特征和消费习惯，以提供定制...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值