衡山 22/12/11 vue6

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量70 收藏
点赞数
分类专栏： # 衡山 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ninoninoni/article/details/128272120
版权

目录

目录

在这里插入图片描述

页面布局流程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注册页面七大改动

<template>
	<h1>Regist</h1>
	<van-form @submit="onSubmit">
	  <van-cell-group inset>
	    <van-field
	      v-model="username"
	      name="用户名"
	      label="用户名"
	      placeholder="用户名"
	      :rules="[
			  { required: true, message: '请填写用户名' },
		      {validator:checkUsername,message:'用户已经被注册'}
		  ]"
	    />
	    <van-field
	      v-model="password"
	      type="password"
	      name="密码"
	      label="密码"
	      placeholder="密码"
	      :rules="[{ required: true, message: '请填写密码' }]"
	    />
		<van-field
		  v-model="re_password"
		  type="password"
		  name="密码"
		  label="密码"
		  placeholder="再次输入密码密码"
		  :rules="[  
			  { required: true, message: '再次输入密码密码' },
			  {validator:checkRePassword,message:'两次输入密码不一致'}
			  ]"
		/>
	  </van-cell-group>
	  <div style="margin: 16px;">
	    <van-button round block type="primary" native-type="submit">
	      提交
	    </van-button>
	  </div>
	</van-form>
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	
	const username = ref('');
	const password = ref('');
	const re_password = ref('');
	
	
	const onSubmit = (values) => {
      console.log('submit', values);
    };
	
	// function onSubmit(values){
	// 	console.log('submit', values);
	// }
	
	const checkRePassword = (value)=>{
		console.log("检查两次密码是否一致")
		if(password.value != re_password.value){
			return false
		}
		return true
	}
	
	function checkUsername(){
		console.log("检查用户是否重名")
		
		return '${username.value}已经被注册'
	}
	
	
</script>

<style>
</style>

验证用户名是都被占用

在这里插入图片描述

在这里插入图片描述

密码两次验证

在这里插入图片描述
在这里插入图片描述

api管理

在这里插入图片描述

在这里插入图片描述
serviceAxios.ts

import axios from "axios";
import serverConfig from "@/config";

// import qs from "qs";


// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: serverConfig.baseURL, // 基础请求地址
  timeout: 10000,                // 请求超时设置
  withCredentials: false,        // 跨域请求是否需要携带cookie
});


// 创建请求拦截(发送请求的时候，携带上一些头信息)
serviceAxios.interceptors.request.use(
  (config) => {
    // 这里可以添加自己的业务逻辑，如请求时加token等 Authorization
    console.log("请求配置", config);
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 创建响应拦截
serviceAxios.interceptors.response.use(
  (res) => {
    let data = res.data;
    // 处理自己的业务逻辑，比如判断 token 是否过期等等
    // 代码块
    return data;
  },
  (error) => {
    let message = "请求出错了！！状态码:"+error.response.status;
    return Promise.reject(message);
  }
);


export default serviceAxios;

.env.develipment

VITE_API_TARGET_URL=https://mock.presstime.cn/mock/635364243ea0490082820ad1/example/

vite.config.ts

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import { resolve } from 'path'

export default({command, mode}) => defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
	createStyleImportPlugin({
	  resolves: [{
		  libraryName: '@nutui/nutui',
		  libraryNameChangeCase: 'pascalCase',
		  resolveStyle: (name) => {
			return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`
		  },
	  }]
	}),
  ],
  css: {
	  preprocessorOptions: {
		scss: {
		  // 配置 nutui 全局 scss 变量
		  additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
		}
	  }
	},
  resolve: {
	   // 配置别名(方便)
       alias: [
			{ find: '@', replacement: resolve(__dirname, 'src') },
			{ find: '_c', replacement: resolve(__dirname, 'src/components') },
			{ find: '_v', replacement: resolve(__dirname, 'src/views') },
		]
    },
	server: {
		// host: true,
		// hmr: true,
		proxy: {
		  '/api': {
			// 根据不同运行环境加载不同的配置文件
			target: loadEnv(mode, process.cwd()).VITE_API_TARGET_URL,
			// 根据配置文件加载
			// target: serverConfig.server.dev,
			changeOrigin: true,
			rewrite: (path) => path.replace(/^\/api/, '')
		  }
		}
	  },

});

user.ts

import serviceAxios from "@/utils/serviceAxios"

// 调用检查用户名是否重复接口
// /check/username?username=cali
export const checkUsername = (params) =>{
	return serviceAxios({
		url: '/check/username',
		method: 'get',
		params
	})
};

export const createUser = (params) =>{
	return serviceAxios({
		url: '/user',
		method: 'post',
		params
	})
};

Regist.vue

<template>
	<h1>Rgeist</h1>
	<van-form @submit="onSubmit">
	  <van-cell-group inset>
	    <van-field
	      v-model="username"
	      name="用户名"
	      label="用户名"
	      placeholder="用户名"
	      :rules="[
			  { required: true, message: '请填写用户名' },
			  { validator: checkUserRepete, message: '用户已经被注册'}
			  ]"
	    />
	    <van-field
	      v-model="password"
	      type="password"
	      name="密码"
	      label="密码"
	      placeholder="密码"
	      :rules="[{ required: true, message: '请填写密码' }]"
	    />
		<van-field
		  v-model="re_password"
		  type="password"
		  name="密码"
		  label="密码"
		  placeholder="密码"
		  :rules="[
			  { required: true, message: '请确认密码' },
			  { validator: checkRePassword, message: '两次密码不一致'}
			]"
		/>
	  </van-cell-group>
	  <div style="margin: 16px;">
	    <van-button round block type="primary" native-type="submit">
	      提交
	    </van-button>
	  </div>
	</van-form>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {checkUsername} from '@/api/user'
	
	const username = ref("")
	const password = ref("")
	const re_password = ref("")
	
	
	function onSubmit(){
		console.log("Onsubmit...")
		// 调用注册接口
		// 1. api/user.ts => 定义请求api函数
		// 2. 在onSubmit调用请求api函数  Toast提示，成功、失败
	}
	
	function checkUserRepete(name){
		console.log("检查用户名是否重名")
		// return false
		// return `${username.value}已经被注册`
		// return `${name}已经被注册`
		var parmas = {"username":name}
		checkUsername(parmas)
		// 上面的内容执行成功
		.then(res => {
			console.log("api result", res)
			if(res.code != 0){
				return false
			}
			return true
		})
		// 上面checkUsername+then执行出错
		.catch(err => {
			console.log("error")
			return `出错了:${err}`
		})
		
	}
	
	function checkRePassword(){
		if(password.value != re_password.value){
			return false
		}
		return true
	}
	
	// 请求api -> axios -> 请求 url => /check/username
	// 将基础url放到配置文件中 => https://mock.presstime.cn/mock/635364243ea0490082820ad1/example/
	// /api/check/username => https://xxxxxxxxx/example/check/username
	// yarn dev => 开发环境development => 加载.env.development
	// 

</script>

<style>
</style>

index.ts

const serverConfig = {
baseURL: “/api”, // 请求基础地址,可根据环境自定义
useTokenAuthorization: true, // 是否开启 token 认证
};
export default serverConfig;

注册

在这里插入图片描述

在这里插入图片描述

登录接口

在这里插入图片描述

login

<template>
	<!-- @submit => 绑定提交事件 => 定义onSubmit函数 -->
	<van-form @submit="onSubmit">
	  <van-cell-group inset>
		  <!-- v-model=>定义username/password -->
	    <van-field
	      v-model="username"
	      name="username"
	      label="用户名"
	      placeholder="用户名"
	      :rules="[{ required: true, message: '请填写用户名' }]"
	    />
	    <van-field
	      v-model="password"
	      type="password"
	      name="password"
	      label="密码"
	      placeholder="密码"
	      :rules="[{ required: true, message: '请填写密码' }]"
	    />
	  </van-cell-group>
	  <div style="margin: 16px;">
	    <van-button round block type="primary"  native-type="submit">
	      提交
	    </van-button>
	  </div>
	</van-form>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	// import {Toast} from 'vant'
	import { showSuccessToast, showFailToast } from 'vant';
	import 'vant/es/toast/style';
	import {login} from '@/api/user'
	import router from '@/router'
	
	var username = ref("")
	var password = ref("")
	
	function onSubmit(data){
		console.log("on Submit")
		// 定义接口函数
		// 调用接口函数
		login(data)
		.then(res=>{
			if(res.code != 0){
				showFailToast('失败文案');
			}else{
				showSuccessToast('成功文案');
				localStorage.setItem("username1",res.data.username)
				router.push({
					name:"home",
					query: {date:new Date().getTime()}
				})
			}
		})
		.catch(err=>{
			console.log("出错了~",err)
		})
		
		// if(username.value=="admin" && password.value=="123456"){
		// 	console.log("成功")
		// 	showSuccessToast('成功文案');
		// 	// Toast.success('成功文案');
			
		// }else{
		// 	console.log("失败")
		// 	showFailToast('失败文案');
		// 	// Toast.fail('失败文案');
		// }
	}
	
</script>

<style>
</style>

Regist:

<template>
	<h1>Rgeist</h1>
	<van-form @submit="onSubmit">
	  <van-cell-group inset>
	    <van-field
	      v-model="username"
	      name="username"
	      label="用户名"
	      placeholder="用户名"
	      :rules="[
			  { required: true, message: '请填写用户名' },
			  { validator: checkUserRepete, message: '用户已经被注册'}
			  ]"
	    />
	    <van-field
	      v-model="password"
	      type="password"
	      name="password"
	      label="密码"
	      placeholder="密码"
	      :rules="[{ required: true, message: '请填写密码' }]"
	    />
		<van-field
		  v-model="re_password"
		  type="password"
		  name="re_password"
		  label="密码"
		  placeholder="密码"
		  :rules="[
			  { required: true, message: '请确认密码' },
			  { validator: checkRePassword, message: '两次密码不一致'}
			]"
		/>
	  </van-cell-group>
	  <div style="margin: 16px;">
	    <van-button round block type="primary" native-type="submit">
	      提交
	    </van-button>
	  </div>
	</van-form>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {checkUsername, createUser} from '@/api/user'
	import { showSuccessToast, showFailToast } from 'vant';
	import router from '@/router'
	import 'vant/es/toast/style';
	
	const username = ref("")
	const password = ref("")
	const re_password = ref("")
	
	
	function onSubmit(data){
		console.log("Onsubmit...")
		// 调用注册接口
		// 1. api/user.ts => 定义请求api函数
		// 2. 在onSubmit调用请求api函数  Toast提示，成功、失败
		// var data = {
		// 	"username":username.value,
		// 	"password":password.value,
		// 	"re_password":re_password.value
		// }
		createUser(data)
		.then(res=>{
			console.log(res)
			if(res.code != 0){
				showFailToast('失败文案');
			}else{
				showSuccessToast('成功文案');
				router.push({
					name:"login",
					query: {date:new Date().getTime()}
				})
			}
		})
		.catch(err=>{
			
		})
	}
	
	function checkUserRepete(name){
		console.log("检查用户名是否重名")
		// return false
		// return `${username.value}已经被注册`
		// return `${name}已经被注册`
		var parmas = {"username":name}
		var result = checkUsername(parmas)
		// 上面的内容执行成功
		.then(res => {
			console.log("api result", res)
			if(res.code != 0){
				return false
			}
			return true
		})
		// 上面checkUsername+then执行出错
		.catch(err => {
			console.log("error")
			return `出错了:${err}`
		})
		return result
	}
	
	function checkRePassword(){
		if(password.value != re_password.value){
			return false
		}
		return true
	}
	
	// 请求api -> axios -> 请求 url => /check/username
	// 将基础url放到配置文件中 => https://mock.presstime.cn/mock/635364243ea0490082820ad1/example/
	// /api/check/username => https://xxxxxxxxx/example/check/username
	// yarn dev => 开发环境development => 加载.env.development
	// 

</script>

<style>
</style>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

京屿大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
衡山 22/11/6 vue1
ninoninoni的博客
11-06 139
vue
衡山 22/11/3 vue2
ninoninoni的博客
11-13 99
vue
衡山 22/11/27 vue4
ninoninoni的博客
11-27 176
vue
衡山 22/11/20 vue3
ninoninoni的博客
11-27 53
前端
vue下载Excel，word
cq_run的博客
06-13 374
【代码】vue下载Excel。
计算机毕业设计django+vue南岳衡山旅游网站【开题+论文+程序】
sheji304的博客
08-05 814
因此，开发一个基于Django+Vue框架的南岳衡山旅游网站，旨在通过数字化手段整合旅游资源，优化旅游服务流程，为游客提供更加便捷、高效、全面的旅游体验。本研究的意义在于，通过设计并实现一个集用户管理、景点类型分类、景点信息展示、售票信息发布、购票订单处理、退票信息管理、旅游攻略分享等功能于一体的南岳衡山旅游网站，不仅能够为游客提供一站式旅游服务，提升旅游满意度，还能够促进南岳衡山旅游资源的有效整合与利用，推动当地旅游业的数字化转型和可持续发展。2024年02月: 根据需求分析，进行详细设计；
VUE实现市、区二级联动
萌萌的博客
09-06 3616
VUE实现市、区二级联动1.封装联动组件2.封装联动地区组件3.地区联动js代码 步骤： 效果图： 1.封装联动组件 <template> <MyCity v-model="provAndCity" /> </template> <script> //引入联动子组件 import MyCity from './companys/citys.vue' export default { components: { MyCity }, d
Vuecli 城市三级联动的使用
m0_63498341的博客
12-07 1471
首先说一下实现思路： 1.采用单独的js文件存储省市区数据，可以是json或者js文件。 2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。 3.最好采用单独的组件实现，方便修改和复用。 引入mint-ui: //当前项目下命令行输入 npm i mint-ui --save //在main.js文件中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vu
Vue使用el-cascader实现地区选择器组件
liyh722的博客
12-06 935
Vue使用el-cascader实现地区选择器组件
前端的面试题
本人小可爱
08-30 664
【代码】前端的面试题。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 140
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 768
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 355
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Window Performance API
Bruce__taotao的博客
08-28 1837
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1642
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
js对象操作常用方法
m0_75276704的博客
09-02 325
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 2595
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1264
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
Already included file name 'd:/code/learnvue/vue_test/src/components/School.vue' differs from file name 'd:/code/learnvue/vue_test/src/components/school.vue' only in casing. The file is in the program because: Imported via './components/School.vue' from file 'd:/code/learnvue/vue_test/src/App.vue' Root file specified for compilation Root file specified for compilation
07-08
这个问题是由于文件名的大小写不一致所引起的。错误信息显示，文件名为'd:/code/learnvue/vue_test/src/components/School.vue'与'd:/code/learnvue/vue_test/src/components/school.vue'的大小写不同。 在这个程序中，文件被包含进来的原因有三个： 1. 从'd:/code/learnvue/vue_test/src/App.vue'文件中通过'./components/School.vue'导入。 2. 作为编译的根文件。 3. 作为编译的根文件。 解决这个问题的方法是，将文件名的大小写调整为一致。你可以通过将文件名改为全小写或者全大写来解决这个问题。确保在代码中引用文件时，大小写也要匹配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值