thinkphp3.23 B-jui1.2开发的美容院SPA会员管理系统

X-MMS基于thinkphp3.23 B-JUI1.2开发，权限运用了Auth类认证，权限可以细分到每个功能，增删改查功能一应俱全，整合了PHPExcel导出功能，数据分析图形使用了Jpgraph图表 安装说明 1.把mms2.sql 导入到MYSQL数据库中，把App/Common/Conf/db.php中的数据库名称，账号密码改成自己的。 2.把程序放在php版本大于5.3的环境中，如：http://127.0.0.1/ 管理员的账号admin 密码 admin123456 3.界面是B-JUI，请使用IE8以上，或是谷歌浏览器。效果比较好

文件：590m.com/f/25127180-500071293-e6adde（访问密码：551685）

以下内容无关：

-------------------------------------------分割线---------------------------------------------

在我们公司门户网站里面，如果有需要，我们可以提供一个页面给用户反馈信息，以便获得宝贵的用户信息反馈或者一些产品咨询的记录，一般这个结合邮件发送到负责人的邮箱即可。本篇随笔结合后端发送邮件的操作，把相关信息发送到门户网站的负责人邮箱里面。

1、客户反馈界面 我们这个主题主要介绍BootstrapVue的使用，虽然我们有时候使用了常规的HTML元素，不过也是使用了Bootstrap的样式来处理界面的。

本篇随笔继续介绍BootstrapVue中的表单组件 b-form 及表单元素的使用。在线反馈界面如下所示。

在这里主要通过一些常规的数据录入获得客户的反馈即可。

Vue模板的HTML界面代码如下所示

复制代码 <b-form @submit=“onSubmit” class=“mt-4 mb-5”>

提 交 复制代码 而其中data里面定义了表单对应的数据，如下所示

复制代码 form: { name: ‘’, phone: ‘’, suggest: null, message: ‘’, }, suggest: [ { value: null, text: ‘反馈类型’ }, { value: ‘需求上报’, text: ‘需求上报’ }, { value: ‘商务洽谈’, text: ‘商务洽谈’ }, { value: ‘意见建议’, text: ‘意见建议’ }, { value: ‘其它’, text: ‘其它’ } ], 复制代码 在数据提交的时候，我们根据正则表达式来判断一下对应的数据，当然我们也可以使用BootstrapVue的表单验证控件来处理，具体可以参考BootstrapVue的表单验证组件。

复制代码 async onSubmit (evt) { evt.preventDefault() const phoneReg = /^1[3456789]\d{9}KaTeX parse error: Got function '\.' with no arguments as subscript at position 39: …[A-Za-z0-9]+([_\̲.̲][A-Za-z0-9]+)*…/ if (!phoneReg.test(this.form.phone) && !emailReg.test(this.form.phone)) { this.KaTeX parse error: Expected 'EOF', got '}' at position 131: …) return }̲ 复制代码 而其中 this…bvToast.toast 使用了BootstrapVue 冒泡提示组件。

通过this.$bvToast.toast()Vue组件实例注入从应用程序中的任何位置生成动态toast，而无需在应用程序中放置组件。

使用this.$bvToast.toast()方法生成toasts。该方法接受两个参数：

message: toast主体的内容（字符串或VNodes数组）。必填的。将不会显示带有空消息的Toasts。有关将VNodes数组作为消息传递的示例，请参阅Advanced usage部分。 options: 用于提供标题和/或附加配置选项的可选选项对象。title选项可以是字符串或VNodes数组 options参数接受组件以camelCase name格式而不是kebab case格式接受的大多数道具（static和visible的除外）。

接着我们收集客户的信息，组合后调用后端发送邮件接口，发送邮件即可，最后提示用户发送是否成功。

复制代码 var type = ‘反馈’ var html = <p><strong>发信人姓名：</strong></p> <p>${this.form.name}</p> <p><strong>发信人联系方式：</strong></p> <p>${this.form.phone}</p> <p><strong>发信人反馈类型：</strong></p> <p>${this.form.suggest}</p> <p><strong>发信人留言：</strong></p> <p>${this.form.message}</p> const flag = SendMail(html, type)

if (flag) { this.form = { name: '', phone: '', message: '' } this.$bvToast.toast(`提交成功，我们将尽快与您取得联系！`, { title: '提交结果', variant: 'success', autoHideDelay: 5000 }) } else { this.$bvToast.toast(`提交失败，请稍后重试！`, { title: '提交结果', variant: 'danger', autoHideDelay: 5000 }) }

复制代码

2、邮件的发送处理 关于邮件的发送，之前有参考过 nodemailer，这个使用node环境发送邮件的组件，不过我们现在的BootstrapVue项目的前端不符合这个条件，除非引入 nuxt ，让页面先在后端运行再推送给前端展示。

关于nodemailer的学习，可以参考下：https://github.com/nodemailer/nodemailer，或者官网：https://nodemailer.com/about/

它的使用代码如下所示：

复制代码 “use strict”; const nodemailer = require(“nodemailer”);

// async…await is not allowed in global scope, must use a wrapper async function main() { // Generate test SMTP service account from ethereal.email // Only needed if you don’t have a real mail account for testing let testAccount = await nodemailer.createTestAccount();

// create reusable transporter object using the default SMTP transport let transporter = nodemailer.createTransport({ host: “smtp.ethereal.email”, port: 587, secure: false, // true for 465, false for other ports auth: { user: testAccount.user, // generated ethereal user pass: testAccount.pass, // generated ethereal password }, });

// send mail with defined transport object let info = await transporter.sendMail({ from: ‘“Fred Foo 👻” foo@example.com’, // sender address to: “bar@example.com, baz@example.com”, // list of receivers subject: “Hello ✔”, // Subject line text: “Hello world?”, // plain text body html: “Hello world?”, // html body });

console.log(“Message sent: %s”, info.messageId); // Message sent: b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com

// Preview only available when sending through an Ethereal account console.log(“Preview URL: %s”, nodemailer.getTestMessageUrl(info)); // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou… } 复制代码 不过前面说了，我们不使用这个，就一笔带过，谈谈我们后端使用ABP接口发送邮件的处理吧。

我们前端封装一个调用后端接口发送邮件的通用处理函数，如下所示。

复制代码 function privateSendEmail(email, subject, body) { var data = { email, subject, body } return request({ url: ‘/abp/services/app/Account/SendEmail’, method: ‘post’, data: data }) } 复制代码 再简单封装一下发送反馈信息的邮件操作函数，如下所示。

复制代码 export async function SendMail(html, type) { //发送邮件 type = type || ‘反馈’ const mailOptions = { from: 一条来自【广州爱奇迪】网站的${type} wuhuacong@163.com, to: ‘wuhuacong@163.com’, subject: 一条来自【广州爱奇迪】网站的${type}, //邮件标题 html, //邮件内容

var email = ‘wuhuacong@163.com’ var subject = 一条来自【广州爱奇迪】网站的${type}

var result = false await privateSendEmail(email, subject, html).then(data => { result = data.success

return result

}) } 复制代码 这样我们在组件里面，直接引入这个封装函数进行调用即可。

import { SendMail } from ‘@/api/system/mail’ 最后发送操作。

再次回到后端的ABP邮件发送接口上，我之前在随笔《循序渐进VUE+Element 前端应用开发(33）— 邮件参数配置和模板邮件发送处理》中介绍过邮件发送的操作，我们ABP框架后端是基于AbpMailkitModule组件进行发送邮件的，只需要配置好相关发送邮件的信息即可。