通用后台管理系统前端界面Ⅵ——首页、登录页、404页面

news2024/11/24 12:00:10

登录页

1、为了方便起见，先将element-ui的使用改为全局引入的方式。修改main.js文件如下：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//这个是局部引入，前面的文章有讲过
// import '../plugins/element'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import router from './router/index'
Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2、写登陆页面：

        2.1、components文件夹下新建Login.vue

        2.2、从element-ui官网找需要的组件：+

 

         2.3、修改代码（包括数据和表单绑定）整合后：

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return{
        loginForm:{
            username:'',
            password:''
    }
    }
  },
};
</script>

<style lang="scss">
.login{
    width: 100%;
    height: 100%;
    position:absolute;
    background: #88b2dc;
    .box-card{
        width: 450px;
        margin: 160px auto;
        .el-card__header{
            font-size: 34px;
        }
        .el-button{
            width: 30%;
        }
    }
}
</style>

3、修改路由：启动项目（使用重定向）和输入http://localhost/login，进入的页面都是为登录页面 

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            // component: Home
            component: () => import('@/components/Home') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

运行结果：

 4、登录验证

        4.1 简易版，适用于小项目和简单的验证规则，实现：将验证规则直接写在html中

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form :model="loginForm" ref="loginForm" label-width="100px">
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {
              min: 4,
              max: 10,
              message: '长度在4-10位字符之间',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              min: 6,
              max: 12,
              message: '长度在6-12位字符之间',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

当输入框失去焦点时，会自动进行表单校验

         4.2登录验证进阶版 

                ①在表单里绑定rules，直接在Login.vue页面的data中写校验规则，写法参考element-ui的form表单

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    // rule 是校验规则，value是input用户输入的值，callback是回调函数 参考element-ui的api文档
    const validateName = (rule, value, callback) => {
      //   请输入4-10位昵称
      let reg = /(^[a-zA-Z0-9]{4,10}$)/;
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入4-10位用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      //   6-12位密码需要包含大小写字母和数字以及特殊符号
      let pass =
        /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!pass.test(value)) {
        callback(new Error("6-12位密码需要包含大小写字母和数字及特殊符号"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },

  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          console.log(this.loginForm);
        } else {
          console.log(this.loginForm);
        }
      });
    },
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #88b2dc;
  .box-card {
    width: 450px;
    margin: 160px auto;
    .el-card__header {
      font-size: 34px;
    }
    .el-button {
      width: 30%;
    }
  }
}
</style>

 效果：

小技巧：使用写校验规则插件

 使用：按下f1（我的笔记本需要按下Fn+f1）

                ②在表单里绑定rules，校验规则封装后，再在Login.vue页面导入校验规则（更推荐）

在src下新建utlis文件夹，新建validate.js文件，把Login.vue页面data中的校验规则过来，修改为如下：

// 用户名匹配
export function nameRule(rule, value, callback) {
    //  请输入4-10位昵称
    let reg = /(^[a-zA-Z0-9]{4,10}$)/;
    if (value === "") {
        callback(new Error("请输入用户名"));
    } else if (!reg.test(value)) {
        callback(new Error("请输入4-10位用户名"));
    } else {
        callback();
    }
}

// 密码正则匹配
export function passRule(rule, value, callback) {
    //   6-12位密码需要包含大小写字母和数字以及特殊符号
    let pass = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
    if (value === "") {
        callback(new Error("请输入密码"));
    } else if (!pass.test(value)) {
        callback(new Error("6-12位密码需要包含大小写字母和数字及特殊符号"));
    } else {
        callback();
    }
}

在Login.vue页面修改为：

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { nameRule, passRule } from '../utils/validate.js'

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: nameRule, trigger: "blur" }],
        password: [{ validator: passRule, trigger: "blur" }],
      },
    };
  },

  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          console.log(this.loginForm);
          this.axios
            .post("http://1.116.64.64:5004/api2/login", this.loginForm)
            .then((res) => {
              console.log(res);
              if (res.data.status === 200) {
                localStorage.setItem("username", res.data.username);
                this.$message({ message: res.data.message, type: "success" });
                this.$router.push("/home");
              }
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          console.log(this.loginForm);
        }
      });
    },
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #88b2dc;
  .box-card {
    width: 450px;
    margin: 160px auto;
    .el-card__header {
      font-size: 34px;
    }
    .el-button {
      width: 30%;
    }
  }
}
</style>

效果：

5、登录页面连接后端

第一种

首先：使用mock准备模拟一下网络请求后端接口：

 ① 在vscode终端输入，ctrl+c结束正在运行的项目，再下载mock插件，输入

npm i @shymean/mock-server -g

② 插件安装完成后，然后在磁盘中随便一个地方新建一个文件夹，命名为 mock; 在mock文件里面新建一个mock.js空文件；

在终端进入mock文件夹，输入命令mock,启动本地mock服务器，默认端口为7654

mock>mock server listen at 7654

操作步骤如下图：

 打开mock.js这个文件，自己写一些测试数据如下：

//登录接口
Mock.mock(/login/, {
    code: 200,
    data: {
      access_token: "748_bef_246_test",
      expires_in: 7200,
    }
  })
  
  //用户信息
  Mock.mock(/userInfo/, {
    code: 200,
    user: {
     userName:'admin',
     password:'123456',
     role:'admim',
    }
  })

 第二种

找一个自己或别人写好的后端接口，B站有很多，找一下直接用

 封装token

 在utils文件夹下新建setToken.js文件，内容如下：

export function setToken(tokenKey, token) {
    return localStorage.setItem(tokenKey, token)
}

export function getToken(tokenKey) {
    return localStorage.getItem(tokenKey)
}

export function removeToken(tokenKey) {
    return localStorage.removeItem(tokenKey)
}

在Login.vue进行导入使用

 

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { nameRule, passRule } from '../utils/validate.js'
import { setToken } from '@/utils/setToken.js'
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: nameRule, trigger: "blur" }],
        password: [{ validator: passRule, trigger: "blur" }],
      },
    };
  },

  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          console.log(this.loginForm);
          this.axios
            .post("http://1.116.64.64:5004/api2/login", this.loginForm)
            .then((res) => {
              console.log(res);
              if (res.data.status === 200) {
                // localStorage.setItem("username", res.data.username);
                setToken("username", res.data.username);
                this.$message({ message: res.data.message, type: "success" });
                this.$router.push("/home");
              }
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          console.log(this.loginForm);
        }
      });
    },
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #88b2dc;
  .box-card {
    width: 450px;
    margin: 160px auto;
    .el-card__header {
      font-size: 34px;
    }
    .el-button {
      width: 30%;
    }
  }
}
</style>

二次封装axios

 设置项目代理，修改vue.config.js文件如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    host: 'localhost',
    proxy: {
      'api': {
        target: 'http://1.116.64.64:5004/api2/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

    }
  }
})

项目根目录下新建service.js文件，进行封装axios

import axios from 'axios'
import { getToken } from '@/utils/setToken.js'
import { Message } from 'element-ui'

const service = axios.create({
    baseURL: '/api', // baseURL会自动加在请求地址上
    timeout: 3000
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在请求之前做些什么(获取并设置token)
    config.headers['token'] = getToken('token')
    return config
}, (error) => {
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    let { status, message } = response.data
    if(status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    return Promise.reject(error)
})

export default service

使用二次封装的axios，依旧采用全局导入的方式，修改main.js文件如下：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import '../plugins/element'
import 'font-awesome/css/font-awesome.min.css'
// import axios from 'axios'
import service from '../service'
import router from './router/index'
//或者这样导入：会自动找到index文件
//import router from './router'
Vue.config.productionTip = false
// Vue.prototype.axios = axios
Vue.prototype.service = service
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

修改Login.vue页面，注释掉引入的setToken文件

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>疫起健康后台管理系统</span>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { nameRule, passRule } from '../utils/validate.js'
// import { setToken } from '@/utils/setToken.js'
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: nameRule, trigger: "blur" }],
        password: [{ validator: passRule, trigger: "blur" }],
      },
    };
  },

  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          console.log(this.loginForm);
          this.service('/login',this.loginForm)
          } else {
          console.log(this.loginForm);
        }
      });
    },
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #88b2dc;
  .box-card {
    width: 450px;
    margin: 160px auto;
    .el-card__header {
      font-size: 34px;
    }
    .el-button {
      width: 30%;
    }
  }
}
</style>

ctrl+c关掉当前运行的项目，重新新建终端输入：npm run serve，修改了vue.config.js文件一定要重启项目，配置才会生效，再进行接口测试，否则会报错如下：访问的依旧是localhhost:8080端口

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/14211.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

idea创建javaweb项目步骤超详细（2022最新版本）

idea创建javaweb项目步骤超详细（2022最新版本）

目录 前言&#xff1a; 一、新建文件 1.在idea里面点击文件-新建-项目 2.新建项目-更改名称为自己想要的项目名称-创建 3.右键自己建立的项目-添加框架支持 4.勾选Web应用程序-确定 5.建立成功界面 二、配置tomcat 6.点击添加配置文件 7.点击这个 8.选择这个tomcat的本…
阅读更多...
数据分析利器：XGBoost算法最佳解析

数据分析利器：XGBoost算法最佳解析

XGBoost是一种经典的集成式提升算法框架&#xff0c;具有训练效率高、预测效果好、可控参数多、使用方便等特性&#xff0c;是大数据分析领域的一柄利器。在实际业务中&#xff0c;XGBoost经常被运用于用户行为预判、用户标签预测、用户信用评分等项目中。XGBoost算法框架涉及到…
阅读更多...
javaWeb项目基于tomcat运行部署后访问方案总结

javaWeb项目基于tomcat运行部署后访问方案总结

javaWeb项目基于tomcat运行部署后访问方案总结 1.需求背景 最近接到一个老项目，这个是一个前后没有分离的java+jsp项目，所以前后端的代码是在一个项目里面的，因此在这个项目上开发就需要面临第一个问题：启动运行项目。简介：Java Web，是用Java技术来解决相关web互联网领域…
阅读更多...
字符串的算法题目-字符串

字符串的算法题目-字符串

题目一&#xff1a; 描述 对于一个长度为 n 字符串&#xff0c;我们需要对它做一些变形。 首先这个字符串中包含着一些空格&#xff0c;就像"Hello World"一样&#xff0c;然后我们要做的是把这个字符串中由空格隔开的单词反序&#xff0c;同时反转每个字符的大小写…
阅读更多...
【Java】数组中值得说的那些事

【Java】数组中值得说的那些事

文章目录前言一、数组的创建及初始化&#x1f333;1、数组的创建&#x1f333;2、数组的初始化&#x1f351;&#xff08;1&#xff09;动态初始化&#x1f351;&#xff08;2&#xff09;静态初始化二、数组的使用&#x1f333;1、数组中元素访问&#x1f333;2、遍历数组&…
阅读更多...
力扣LeatCode算法题-两数之和（二）

力扣LeatCode算法题-两数之和（二）

力扣算法题第二题&#xff0c;两数相加算法题&#xff1a; 要求&#xff1a; //给出两个 非空 的链表用来表示两个非负的整数。其中&#xff0c;它们各自的位数是按照 逆序 的方式存储的&#xff0c;并且它们的每个节点只能存储 一位 数字。 //如果&#xff0c;我们将这两个数…
阅读更多...
企业使用有线和5G主备双链路上网配置案例

企业使用有线和5G主备双链路上网配置案例

场景介绍 典型的企业分支通常还是采用有线链路作为主链路&#xff0c;例如以太链路、MPLS专线等。为了提升分支站点的可靠性&#xff0c;企业一般都会部署两条上行链路&#xff0c;一条为主链路&#xff0c;一条为备链路。如果两条上行链路都采用有线&#xff0c;成本会比较高&…
阅读更多...
JVM StringTable

JVM StringTable

文章目录学习资料StringTableString的基本特性String的内存分配StringTable为什么要调整&#xff1f;String的基本操作字符串拼接操作拼接操作与append操作的效率对比intern()的使用学习资料 【尚硅谷宋红康JVM全套教程&#xff08;详解java虚拟机&#xff09;】 【阿里巴巴Ja…
阅读更多...
prometheus exporter 监控主机

prometheus exporter 监控主机

前提要求部署Grafana 前言 有许多库和服务器可以帮助将第三方系统中的现有指标导出为Prometheus指标。在无法直接使用Prometheus度量(例如&#xff0c;HAProxy或Linux系统统计数据)对给定系统进行检测的情况下&#xff0c;这是非常有用的。 node-exporter Linux操作系统采集&…
阅读更多...
【Hack The Box】windows练习-- Scrambled

【Hack The Box】windows练习-- Scrambled

HTB 学习笔记 【Hack The Box】windows练习-- Scrambled &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年11月17日&#x1f334; &…
阅读更多...
第2-3-5章 删除附件的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

第2-3-5章 删除附件的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

文章目录5.4 接口开发-根据id删除附件5.4.1 接口文档5.4.2 代码实现5.4.3 接口测试5.4.4 测试ALI和FAST_DFS以及MINIO上传和删除的接口5.4.4.1 阿里云OSS上传和删除5.4.4.2 FastDFS上传和删除5.4.4.3 Minio上传和删除5.5 接口开发-根据业务类型/业务id删除附件5.5.1 接口文档5.…
阅读更多...
[附源码]SSM计算机毕业设计成都团结石材城商家协作系统JAVA

[附源码]SSM计算机毕业设计成都团结石材城商家协作系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
力扣(LeetCode)6. Z 字形变换(C++)

力扣(LeetCode)6. Z 字形变换(C++)

数学构造 ZZZ 字形变换类似情报加密。找规律解密&#xff0c;就能得到构造的方法。 第 000 行相邻的数&#xff0c;取 n4n4n4 如上图&#xff0c;观察第 000 行和第 333 行 相邻的数&#xff0c;组成等差数列&#xff0c;公差 d62n−2d62n-2d62n−2 2n−22n-22n−2 是说 &…
阅读更多...
【小程序】微信小程序云开发笔记详细教程（建议收藏）

【小程序】微信小程序云开发笔记详细教程（建议收藏）

1- 前言 1.1 微信云开发是什么&#xff1f; 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等&#xff0c;并且原生打通微信开放能力。 开发者无需搭建服务器&#xff0c;可免鉴权直接使用平台提供的…
阅读更多...
Spring Cloud | 实现Eureka Server 高可用服务注册中心全套解决方案

Spring Cloud | 实现Eureka Server 高可用服务注册中心全套解决方案

目录1、在搭建Eureka Server&#xff0c;配置高可用服务注册中心&#xff0c;配置3个Eureka Server:2、因为是在本地实现的话&#xff0c;需要在localhost加入三个服务&#xff0c;需要改变etc/hosts&#xff0c;linux系统通过vim /etc/hosts&#xff0c;3、如果是在测试或者是…
阅读更多...
最优孤岛划分下含分布式电源配电网可靠性评估附Matlab代码

最优孤岛划分下含分布式电源配电网可靠性评估附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
小学生python游戏编程arcade----坦克大战（1）

小学生python游戏编程arcade----坦克大战（1）

小学生python游戏编程arcade----坦克大战&#xff08;1&#xff09;前言坦克类&#xff0c;地图&#xff0c;角色的控制&#xff0c;声音等前期学习的汇总1、坦克类2、title地图加载2.1设置&#xff0c;tank类的引入2.2 角色的引入2.3 效果图2.4 代码实现总结源码获取前言 接上…
阅读更多...
kafka学习之基本概念

kafka学习之基本概念

一、kafka常用基本概念 producer&#xff1a;生产者&#xff0c;生产并发送消息的一方。 consumer&#xff1a;消费者&#xff0c;接收消费消息的一方。 topic&#xff1a;一类消息的集合。在kafka中&#xff0c;消息以主题为单位进行归类&#xff0c;producer负责将消息发送…
阅读更多...
云服务器 宝塔部署SpringBoot前后端分离项目

云服务器 宝塔部署SpringBoot前后端分离项目

&#x1f986;博主介绍&#xff1a;小黄鸭技术 &#x1f308;擅长领域&#xff1a;Java、实用工具、运维 &#x1f440; 系列专栏&#xff1a;&#x1f4e2;开发工具 Java之路 八股文之路 &#x1f4e7;如果文章写作时有错误的地方&#xff0c;请各位大佬指正&#xff0c;一起进…
阅读更多...
舆情监控究竟是什么？怎么运作的？

舆情监控究竟是什么？怎么运作的？

本文首发于&#xff1a;行者AI谛听 随着互联网的加速变化&#xff0c;舆论已成为影响国家政治、社会生活和公众情绪的重要因素&#xff0c;也是影响企业形象和长远发展的重要因素。能及时收集精准措施以及预防减少和消除舆论带来的影响&#xff0c;是行业长远发展的关键条件。下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023