> 我只是一枚小菜鸟，不会并发，不会分布式，也不会自动化、大数据，只有浅显的技术，只是想大概分享下做的一些小工具。每天早上醒来签到已经成为一种习惯，偶尔回答下问题，索性活跃度不是很高，没啥可说的了。
**上预览图**
*平时可能要自己加密或者随机生成一段字符串做密码或者其他的加密用途，上面的预览图是我喜欢的某网站的风格图，模仿其功能，采用 iview + axios + golang 技术，进行功能还原，代码很一般，如果有错误请批评指正。下面是还原预览图*
**代码如下**
- 目录结构
```
index.html
main.go
```
- 执行方式
```
go run main.go
打开 http://localhost:8080 即可
```
- 网页模板
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机字符串</title>
<!-- iview css -->
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<!-- vue.min.js -->
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<!-- iview.min.js -->
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<!-- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
/**
修改默认样式
*/
.ivu-form-item {
margin-bottom: 15px;
}
.container {
margin-top: 50px;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<Row>
<!-- https://www.iviewui.com/docs/guide/start -->
<!-- 在非 template/render 模式下，需要加前缀 i- -->
<i-col span="8" offset="8" class="container">
<i-form label-position="left" :label-width="80">
<Alert>随机字符串生成器</Alert>
<!-- 在非 template/render 模式下，遵守小驼峰- -->
<form-item label="规则：">
<!-- checkbox 目测不支持element-id属性 -->
<checkbox-group v-model="formItem.rules">
<!-- 数字 checkbox指定数字可以当做对应的value -->
<Checkbox label="num">
<span>数字</span>
</Checkbox>
<!-- 小写字母 -->
<Checkbox label="lower">
<span>小写字母</span>
</Checkbox>
<!-- 大写字母 -->
<Checkbox label="upper">
<span>大写字母</span>
</Checkbox>
<!-- 标点符号 -->
<Checkbox label="punctuation">
<span>标点符号</span>
</Checkbox>
</checkbox-group>
</form-item>
<!-- 密码长度 -->
<form-item label="密码长度：">
<input-number :min="1" v-model="formItem.len"></input-number>
</form-item>
<!-- 密码数量 -->
<form-item label="密码数量">
<input-number :min="1" v-model="formItem.quantity"></input-number>
</form-item>
<!-- 生成按钮 -->
<!-- label-width 设置0 效果是左侧区域不占位置--->
<form-item label-width="0">
<i-button @click="generate" type="info" long>生成</i-button>
</form-item>
<!-- 生成的密码 -->
<form-item label="密码">
<i-input v-model="formItem.password" type="textarea" :rows="5" readonly></i-input>
</form-item>
</i-form>
</i-col>
</Row>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
formItem: {
rules: [],
len: 10,
quantity: 1,
password: ''
}
},
methods: {
/**
* 与后台进行交互
* 不应该使用箭头函数来定义 method 函数
* https://cn.vuejs.org/v2/api/index.html#methods
*/
generate() {
var _self = this;
let formData = _self.formItem;
// 校验提示 只校验checkbox其余的暂时不校验
if (formData.rules.length == 0) {
// 提醒框 https://www.iviewui.com/components/notice
this.$Notice.open({
title: '请选择随机字符串的组成内容',
});
return;
}
// 可以通过向 axios 传递相关配置来创建请求
axios.get('/generate', {
params: formData // 提交表单的参数
})
.then(function (response) {
// 获取ajax返会的数据
let data = response.data;
if (data.code == 0) {
// 弹窗
_self.$Notice.open({
title: data.message
});
// 让密码框里换行
_self.formItem.password = data.data.join('\n')
}
})
// 咱不处理异常
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
```
- go代码
```
package main
import (
"net/http"
"text/template"
"log"
"fmt"
"strconv"
"math/rand"
"time"
"encoding/json"
)
// 返会数据
type Response struct {
Code int `json:"code"`
Message string `json:"message"`
Data []string `json:"data"`
}
func main() {
http.HandleFunc("/", index)
http.HandleFunc("/generate", generate)
// 开启80端口
http.ListenAndServe(":8080", nil)
}
// index
// 首页方法
func index(w http.ResponseWriter, r *http.Request) {
defer r.Body.Close()
tpl, err := template.ParseFiles("index.html")
if err != nil {
log.Fatal(err)
return
}
tpl.Execute(w, nil)
}
//generate
// 生成密码
func generate(w http.ResponseWriter, r *http.Request) {
defer r.Body.Close()
// 获取参数
// ParseForm解析URL中的查询字符串，并将解析结果更新到r.Form字段
// 忽略错误
r.ParseForm()
// r.Form是一个map 可以根据fmt.Println(rules)打印出来
rules := r.Form["rules[]"]
//fmt.Println(r.Form)
// 数据有误 rules --> []string
if len(rules) == 0 {
// todo something
return
}
// 长度和数量 len是关键字
len_s := r.Form["len"]
quantity_s := r.Form["quantity"]
//fmt.Println(len_s, quantity_s)
//fmt.Println(len_s[0], quantity_s[0])
// 数据有误
if len(len_s) == 0 || len(quantity_s) == 0 || len_s[0] == "" || quantity_s[0] == "" {
// todo something
return
}
// 将字符串转换成数字
len_2i, err1 := strconv.Atoi(len_s[0])
quantity_2i, err2 := strconv.Atoi(quantity_s[0])
// 数据格式非法
if err1 != nil || err2 != nil {
// todo something
return
}
info := do(rules, len_2i, quantity_2i)
if len(info) == 0 {
// todo something
}
str_s := []string{}
for _, v := range info {
str_s = append(str_s, string(v))
}
if len(str_s) == 0 {
// todo something
}
res := Response{}
res.Code = 0
res.Message = "成功"
res.Data = str_s
res_byte, err := json.Marshal(res)
if err != nil {
// todo something
}
w.Write(res_byte)
}
// do
// 将业务写入其中
func do(rules []string, length, quantity int) [][]rune {
// 创建一个总的存放内容的slice
total := []rune{}
// 遍历rules
for _, val := range rules {
// 数字
if val == "num" {
num_arr := []rune{'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}
total = append(total, num_arr...)
}
// 小写字母
if val == "lower" {
low_arr := []rune{}
for i := 'a'; i < 'z'; i++ {
low_arr = append(low_arr, i)
}
total = append(total, low_arr...)
}
// 大写字母
if val == "upper" {
upper_arr := []rune{}
for i := 'A'; i < 'Z'; i++ {
upper_arr = append(upper_arr, i)
}
total = append(total, upper_arr...)
}
// 标点
if val == "punctuation" {
punc_arr := []rune{'!', '@', '#', '$', '%', '^', '&', '*', '(', ')'}
total = append(total, punc_arr...)
}
}
//fmt.Println(total)
total_len := len(total)
//fmt.Println(total_len)
// 有问题
if total_len == 0 {
// todo something
}
//fmt.Println(len(total))
// 要生成 quantity个len长度的字符串
// 使用给定的seed来初始化生成器到一个确定的状态。
// 最终结果是 slice的slice
data_s := [][]rune{}
rand.Seed(time.Now().UnixNano())
for i := 0; i < quantity; i ++ {
// 返回一个取值范围在[0,n)的伪随机int值，如果n<=0会panic。
fmt.Println(i)
temp_s := []rune{}
for j := 0; j < length; j ++ {
fmt.Println(j)
// 随机下标
idx := rand.Intn(total_len)
temp_s = append(temp_s, total[idx])
}
data_s = append(data_s, temp_s)
}
return data_s
}
```
有疑问加站长微信联系（非本文作者）
