方朝端

20230722----重返学习-vue3项目实战-收尾

day-118-one-hundred-and-eighteen-20230722-vue3项目实战-收尾

vue3项目实战-收尾

对数据统一做处理

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  setInterceptor(instance) {
    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          return res.data.data
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
}
export default new Http()

src/api/index.js

import http from '@/utils/http.js'
const API_LIST = {
  queryIndexInfos: '/index-infos' // 首页的获取数据接口，都在这里
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}

src/views/Home.vue

后退按钮

src/components/TopBar.vue

表单事件初步

src/views/Login.vue

验证码组件封装

src/components/Captcha.vue

验证码使用及校验

src/components/Captcha.vue

src/views/Login.vue

md5摘要算法

pnpm i blueimp-md5

md5特点?
- 不是加密算法，摘要算法。
1. 内容不同摘要的结果不同
2. 如果内容发生一点变化就会发生翻天覆地的变化，雪崩效应
3. 生成长度一致
4. 相同的内容生成的结果一直
5. 不可逆

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register'
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

注册登录操作

核心操作：

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  setInterceptor(instance) {
    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          // 对返回值的状态码是200的情况统一处理
          return res.data.data
        }
        if (res.data.resultCode === 500) {
          return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
}
export default new Http()

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  userLogin: '/user/login',
  userRegister: '/user/register'
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

src/views/Login.vue

代码示例

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  constructor() {
    // 根据环境变量设置请求的路径
    this.baseURL = import.meta.env.DEV ? 'http://backend-api-01.newbee.ltd/api/v1' : '/'
    this.timeout = 5000
  }

  setInterceptor(instance) {
    instance.interceptors.request.use(
      (config) => {
        // 携带token来做处理
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    )
    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          // 对返回值的状态码是200的情况统一处理
          return res.data.data
        }
        if (res.data.resultCode === 500) {
          return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
  request(options) {
    // 请求会实现拦截器
    const instance = axios.create() // 1.每次请求要创建一个新的实例
    this.setInterceptor(instance) // 2.设置拦截器
    // 发送请求参数
    return instance({
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout
    })
  }
  get(url, data) {
    return this.request({
      method: 'get',
      url,
      params: data
    })
  }
  post(url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}
export default new Http()

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register'
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

src/components/Captcha.vue

src/views/Login.vue

登录态校验

代码示例

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/category',
      meta: { title: '分类' },
      name: 'category',
      component: () => import('../views/Category.vue')
    },
    {
      path: '/cart',
      name: 'cart',
      component: () => import('../views/Cart.vue'),
      meta: {
        needLogin: true // 需要登录才能访问的 我们需要配置这个属性
      }
    },
    {
      path: '/user',
      name: 'user',
      component: () => import('../views/User.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login.vue')
    }
  ]
})

router.beforeEach(async (to, from) => {
  let token = localStorage.getItem('token')
  if (token) {
    // 如果有token 说明登录成功，但是如果你访问的还是登录
    if (to.name === 'login') {
      return { path: '/' }
    }
  } else {
    // 没有登录，跳转到登录页面
    // /a/b  -> ['/a','/a/b']
    if (to.matched.some((item) => item.meta.needLogin)) {
      // 此路由需要登录但是没有登录， 应该跳转到登录页面
      return {
        path: '/login',
        query: {
          redirect: to.path, // 跳转到登录页面，并且告诉登录页面稍后回调回来
          ...to.query // 当前页面的其他参数也添加进去
        }
      }
    }
  }
})
export default router

src/views/Login.vue

核心代码

src/router/index.js

const router = createRouter({
  routes: [
    {
      path: '/cart',
      name: 'cart',
      component: () => import('../views/Cart.vue'),
      meta: {
        needLogin: true // 需要登录才能访问的 我们需要配置这个属性
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login.vue')
    }
  ]
})

router.beforeEach(async (to, from) => {
  let token = localStorage.getItem('token')
  if (token) {
    // 如果有token 说明登录成功，但是如果你访问的还是登录
    if (to.name === 'login') {
      return { path: '/' }
    }
  } else {
    // 没有登录，跳转到登录页面
    // /a/b  -> ['/a','/a/b']
    if (to.matched.some((item) => item.meta.needLogin)) {
      // 此路由需要登录但是没有登录， 应该跳转到登录页面
      return {
        path: '/login',
        query: {
          redirect: to.path, // 跳转到登录页面，并且告诉登录页面稍后回调回来
          ...to.query // 当前页面的其他参数也添加进去
        }
      }
    }
  }
})
export default router

src/views/Login.vue

使用pinia的集成

核心代码：

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryCategories: '/categories' // 查询分类的路径
}

// 查询所有的分类
export function queryCategories() {
  return http.get(API_LIST.queryCategories)
}

src/stores/category.js

import { queryCategories } from '@/api'
export const useCategoryStore = defineStore('category', () => {
  const list = ref([]) // 默认所有分类的信息
  async function getCategories() {
    list.value = await queryCategories()
  }
  return { list, getCategories }
})

src/views/Category.vue

代码示例：

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register',
  queryCategories: '/categories' // 查询分类的路径
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

// 查询所有的分类
export function queryCategories() {
  return http.get(API_LIST.queryCategories)
}

src/stores/category.js

import { queryCategories } from '@/api'
export const useCategoryStore = defineStore('category', () => {
  const list = ref([]) // 默认所有分类的信息
  async function getCategories() {
    list.value = await queryCategories()
  }
  return { list, getCategories }
})

src/views/Category.vue

多层级渲染

src/views/Category.vue

新增一个跳转详情页

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  constructor() {
    // 根据环境变量设置请求的路径
    this.baseURL = import.meta.env.DEV ? 'http://backend-api-01.newbee.ltd/api/v1' : '/'
    this.timeout = 5000
  }

  setInterceptor(instance) {
    instance.interceptors.request.use(
      (config) => {
        // 携带token来做处理
        let token = localStorage.getItem('token')
        if (token) {
          config.headers['token'] = token
        }
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    )

    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          // 对返回值的状态码是200的情况统一处理
          return res.data.data
        }
        if (res.data.resultCode === 500) {
          return Promise.reject(res.data)
        }
        if (res.data.resultCode === 416) {
          localStorage.removeItem('token') // 416 可能是token错误，这个时候清除token，重新刷新
          // 刷新后就在此路由的全局钩子，就会走没有token的逻辑
          return window.location.reload()
          // return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
  request(options) {
    // 请求会实现拦截器
    const instance = axios.create() // 1.每次请求要创建一个新的实例
    this.setInterceptor(instance) // 2.设置拦截器
    // 发送请求参数
    return instance({
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout
    })
  }
  get(url, data) {
    return this.request({
      method: 'get',
      url,
      params: data
    })
  }
  post(url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}
export default new Http()

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register',
  queryCategories: '/categories', // 查询分类的路径

  queryGoodsInfo: '/goods/detail'
}
export const queryGoodsInfo = (id) => {
  return http.get(API_LIST.queryGoodsInfo + `/${id}`)
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

// 查询所有的分类
export function queryCategories() {
  return http.get(API_LIST.queryCategories)
}

src/components/HomeGoodsItem.vue

src/views/Detail.vue

请求携带token

在请求拦截器中做，如果本地有token这个字段，就在请求头上带着token。

src/utils/http.js

class Http {

  setInterceptor(instance) {
    instance.interceptors.request.use(
      (config) => {
        // 携带token来做处理
        let token = localStorage.getItem('token')
        if (token) {
          config.headers['token'] = token
        }
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
}

每次请求如果有token，就带上token。

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  constructor() {
    // 根据环境变量设置请求的路径
    this.baseURL = import.meta.env.DEV ? 'http://backend-api-01.newbee.ltd/api/v1' : '/'
    this.timeout = 5000
  }

  setInterceptor(instance) {
    instance.interceptors.request.use(
      (config) => {
        // 携带token来做处理
        let token = localStorage.getItem('token')
        if (token) {
          config.headers['token'] = token
        }
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    )

    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          // 对返回值的状态码是200的情况统一处理
          return res.data.data
        }
        if (res.data.resultCode === 500) {
          return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
  request(options) {
    // 请求会实现拦截器
    const instance = axios.create() // 1.每次请求要创建一个新的实例
    this.setInterceptor(instance) // 2.设置拦截器
    // 发送请求参数
    return instance({
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout
    })
  }
  get(url, data) {
    return this.request({
      method: 'get',
      url,
      params: data
    })
  }
  post(url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}
export default new Http()

处理无效token

src/utils/http.js

import axios from 'axios'
// 请求的时候可以做什么事？ 1）拦截 携带token， 对响应状态码处理， 2）增加loading （增添一个队列）  3）接口可以保存取消的操作
class Http {
  constructor() {
    // 根据环境变量设置请求的路径
    this.baseURL = import.meta.env.DEV ? 'http://backend-api-01.newbee.ltd/api/v1' : '/'
    this.timeout = 5000
  }

  setInterceptor(instance) {
    instance.interceptors.request.use(
      (config) => {
        // 携带token来做处理
        let token = localStorage.getItem('token')
        if (token) {
          config.headers['token'] = token
        }
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    )

    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode == 200) {
          // 对返回值的状态码是200的情况统一处理
          return res.data.data
        }
        if (res.data.resultCode === 500) {
          return Promise.reject(res.data)
        }
        if (res.data.resultCode === 416) {
          localStorage.removeItem('token') // 416 可能是token错误，这个时候清除token，重新刷新
          // 刷新后就在此路由的全局钩子，就会走没有token的逻辑
          return window.location.reload()
          // return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
  request(options) {
    // 请求会实现拦截器
    const instance = axios.create() // 1.每次请求要创建一个新的实例
    this.setInterceptor(instance) // 2.设置拦截器
    // 发送请求参数
    return instance({
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout
    })
  }
  get(url, data) {
    return this.request({
      method: 'get',
      url,
      params: data
    })
  }
  post(url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}
export default new Http()

class Http {

  setInterceptor(instance) {

    instance.interceptors.response.use(
      (res) => {
        if (res.data.resultCode === 416) {
          localStorage.removeItem('token') // 416 可能是token错误，这个时候清除token，重新刷新
          // 刷新后就在此路由的全局钩子，就会走没有token的逻辑
          return window.location.reload()
          // return Promise.reject(res.data)
        }
        return res.data // {resultCode:200,data:{}}
      },
      (err) => {
        return Promise.reject(err)
      }
    )
  }
}

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/category',
      meta: { title: '分类' },
      name: 'category',
      component: () => import('../views/Category.vue')
    },
    {
      path: '/cart',
      name: 'cart',
      component: () => import('../views/Cart.vue'),
      meta: {
        needLogin: true // 需要登录才能访问的 我们需要配置这个属性
      }
    },
    {
      path: '/user',
      name: 'user',
      component: () => import('../views/User.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login.vue')
    },
    {
      path: '/detail/:id',
      name: 'detail',
      meta: {
        needLogin: true
      },
      component: () => import('../views/Detail.vue')
    }
  ]
})

router.beforeEach(async (to, from) => {
  let token = localStorage.getItem('token')
  if (token) {
    // 如果有token 说明登录成功，但是如果你访问的还是登录
    if (to.name === 'login') {
      return { path: '/' }
    }
  } else {
    // 没有登录，跳转到登录页面
    // /a/b  -> ['/a','/a/b']
    if (to.matched.some((item) => item.meta.needLogin)) {
      // 此路由需要登录但是没有登录， 应该跳转到登录页面
      return {
        path: '/login',
        query: {
          redirect: to.path, // 跳转到登录页面，并且告诉登录页面稍后回调回来
          ...to.query // 当前页面的其他参数也添加进去
        }
      }
    }
  }
})
export default router

购物车相关操作

src/api/index.js

// 获取购物车列表
export const queryShopCart = () => http.get('/shop-cart')

// 修改购买数量
export const setCartCount = (cartItemId, goodsCount) => {
  return http.request(
    {
      url: '/shop-cart',
      method: 'PUT'
    },
    {
      cartItemId,
      goodsCount
    }
  )
}
// 删除某条购物车数据
export const removeCart = (cartItemId) => {
  return http.request({
    url: `/shop-cart/${cartItemId}`,
    method: 'DELETE'
  })
}

// 新增购物车数据
export const addNewCart = (goodsId, goodsCount = 1) => {
  return http.post('/shop-cart', {
    goodsId,
    goodsCount
  })
}

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
  }
  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
  }

  return { list, getShopCartList, setShopCartItem, removeShopCartItem, addShopCartItem }
})

src/views/Detail.vue

购物车列表获取

在pinia中定义两个状态，一个hasCartStore表示是否已经请求过。一个list表示购物车列表。
购物车列表需要在用户跳转时，于路由前置守卫中在pinia中获取。
- 如果有token，就从pinia中获取hasCartStore。
  - hasCartStore为true，就代表已经请求过后端了，页面中就可以直接获取到pinia中的购物车列表了。
  - hasCartStore为false，就表示没请求过后端了。调用pinia中的方法，更新数据，在请求完成后，缓存数据，并设置hasCartStore为true。

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register',
  queryCategories: '/categories', // 查询分类的路径

  queryGoodsInfo: '/goods/detail'
}

// 获取购物车列表
export const queryShopCart = () => http.get('/shop-cart')

// 修改购买数量
export const setCartCount = (cartItemId, goodsCount) => {
  return http.request(
    {
      url: '/shop-cart',
      method: 'PUT'
    },
    {
      cartItemId,
      goodsCount
    }
  )
}
// 删除某条购物车数据
export const removeCart = (cartItemId) => {
  return http.request({
    url: `/shop-cart/${cartItemId}`,
    method: 'DELETE'
  })
}

// 新增购物车数据
export const addNewCart = (goodsId, goodsCount = 1) => {
  return http.post('/shop-cart', {
    goodsId,
    goodsCount
  })
}

export const queryGoodsInfo = (id) => {
  return http.get(API_LIST.queryGoodsInfo + `/${id}`)
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

// 查询所有的分类
export function queryCategories() {
  return http.get(API_LIST.queryCategories)
}

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  const hasCartStore = ref(false)
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
    hasCartStore.value = true
  }

  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
  }

  return {
    list,
    getShopCartList,
    setShopCartItem,
    removeShopCartItem,
    addShopCartItem,
    hasCartStore
  }
})

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import { useCartStore } from '@/stores/cart.js'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/category',
      meta: { title: '分类' },
      name: 'category',
      component: () => import('../views/Category.vue')
    },
    {
      path: '/cart',
      name: 'cart',
      component: () => import('../views/Cart.vue'),
      meta: {
        needLogin: true // 需要登录才能访问的 我们需要配置这个属性
      }
    },
    {
      path: '/user',
      name: 'user',
      component: () => import('../views/User.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login.vue')
    },
    {
      path: '/detail/:id',
      name: 'detail',
      meta: {
        needLogin: true
      },
      component: () => import('../views/Detail.vue')
    }
  ]
})

// 登陆态校验。
router.beforeEach(async (to, from) => {
  let token = localStorage.getItem('token')
  if (token) {
    // 如果有token 说明登录成功，但是如果你访问的还是登录
    if (to.name === 'login') {
      return { path: '/' }
    }
  } else {
    // 没有登录，跳转到登录页面
    // /a/b  -> ['/a','/a/b']
    if (to.matched.some((item) => item.meta.needLogin)) {
      // 此路由需要登录但是没有登录， 应该跳转到登录页面
      return {
        path: '/login',
        query: {
          redirect: to.path, // 跳转到登录页面，并且告诉登录页面稍后回调回来
          ...to.query // 当前页面的其他参数也添加进去
        }
      }
    }
  }
})

//
router.beforeEach(() => {
  let token = localStorage.getItem('token')
  if (token) {
    const store = useCartStore()
    if (!store.hasCartStore) {
      // 如果当前没有获取过购物车信息
      store.getShopCartList()
    }
  }
})

export default router

src/views/Detail.vue

Vue.js devtools的使用

购物车数量及添加

src/api/index.js

import http from '@/utils/http.js'
import md5 from 'blueimp-md5'
const API_LIST = {
  queryIndexInfos: '/index-infos', // 首页的获取数据接口，都在这里
  userLogin: '/user/login',
  userRegister: '/user/register',
  queryCategories: '/categories', // 查询分类的路径

  queryGoodsInfo: '/goods/detail'
}

// 获取购物车列表
export const queryShopCart = () => http.get('/shop-cart')

// 修改购买数量
export const setCartCount = (cartItemId, goodsCount) => {
  return http.request({
    url: '/shop-cart',
    method: 'PUT',
    data: {
      cartItemId,
      goodsCount
    }
  })
}

// 删除某条购物车数据
export const removeCart = (cartItemId) => {
  return http.request({
    url: `/shop-cart/${cartItemId}`,
    method: 'DELETE'
  })
}

// 新增购物车数据
export const addNewCart = (goodsId, goodsCount = 1) => {
  return http.post('/shop-cart', {
    goodsId,
    goodsCount
  })
}

export const queryGoodsInfo = (id) => {
  return http.get(API_LIST.queryGoodsInfo + `/${id}`)
}
// 首页数据的获取，直接通过 api 这个文件来操作
export function queryIndexInfos() {
  return http.get(API_LIST.queryIndexInfos)
}
// md5特点？ 不是加密算法，摘要算法 1）内容不同摘要的结果不同 2） 如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应
// 3) 生成长度一致  4）相同的内容生成的结果一直 5） 不可逆
export const userLogin = (loginName, password) => {
  password = md5(password)
  return http.post(API_LIST.userLogin, {
    loginName,
    passwordMd5: password
  })
}
// 用户注册
export const userRegister = (loginName, password) => {
  return http.post(API_LIST.userRegister, {
    loginName,
    password
  })
}

// 查询所有的分类
export function queryCategories() {
  return http.get(API_LIST.queryCategories)
}

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  const hasCartStore = ref(false)
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
    hasCartStore.value = true
  }
  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新，如果是修改也可以不发请求 通过id 获取到这一项，更改数量即可
    list.value.find((item) => item.cartItemId == id).goodsCount = count
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
    // 正常操作的情况下 应该是添加成功后，返回添加后的值
    getShopCartList()
  }
  return {
    hasCartStore,
    list,
    getShopCartList,
    setShopCartItem,
    removeShopCartItem,
    addShopCartItem
  }
})

src/views/Detail.vue

购物车页渲染

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  const hasCartStore = ref(false)
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
    hasCartStore.value = true
  }
  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新，如果是修改也可以不发请求 通过id 获取到这一项，更改数量即可
    list.value.find((item) => item.cartItemId == id).goodsCount = count
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
    // 正常操作的情况下 应该是添加成功后，返回添加后的值
    getShopCartList()
  }
  return {
    hasCartStore,
    list,
    getShopCartList,
    setShopCartItem,
    removeShopCartItem,
    addShopCartItem
  }
})

src/views/Cart.vue

src/components/GoodsItem.vue

购物车页操作

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  const hasCartStore = ref(false)
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
    hasCartStore.value = true
  }
  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新，如果是修改也可以不发请求 通过id 获取到这一项，更改数量即可
    list.value.find((item) => item.cartItemId == id).goodsCount = count
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
    // 正常操作的情况下 应该是添加成功后，返回添加后的值
    getShopCartList()
  }

  const badge = computed(() => {
    // 暂时先计算出 我们当前选中的详情页的数量
    const current = list.value.reduce((memo, current) => ((memo += current.goodsCount), memo), 0)
    return current
  })

  return {
    badge,
    hasCartStore,
    list,
    getShopCartList,
    setShopCartItem,
    removeShopCartItem,
    addShopCartItem
  }
})

src/views/Detail.vue

src/views/Cart.vue

src/components/NavBar.vue

src/components/GoodsItem.vue

购物车全选与删除操作

src/views/Cart.vue

src/stores/cart.js

// 1.获取购物车列表queryShopCart
// 2.修改数量 哪个商品的数量是多少 setCartCount
// 3.删除购物车的某个商品 removeCart
// 4.新增只传递新增的id即可addNewCart
// @ts-ignore
import { queryShopCart, setCartCount, removeCart, addNewCart } from '@/api'
export const useCartStore = defineStore('cart', () => {
  const list = ref([])
  const hasCartStore = ref(false)
  // 在pinia中缓存数据
  async function getShopCartList() {
    list.value = await queryShopCart()
    hasCartStore.value = true
  }
  async function setShopCartItem(id, count) {
    await setCartCount(id, count)
    // 将列表中的数据也要更新，如果是修改也可以不发请求 通过id 获取到这一项，更改数量即可
    list.value.find((item) => item.cartItemId == id).goodsCount = count
  }
  async function removeShopCartItem(id) {
    await removeCart(id)
    // 将列表中的数据也要更新
    list.value = list.value.filter((item) => item.cartItemId != id)
  }
  async function addShopCartItem(id) {
    await addNewCart(id)
    // 将列表中的数据也要更新
    // 正常操作的情况下 应该是添加成功后，返回添加后的值
    getShopCartList()
  }

  const badge = computed(() => {
    // 暂时先计算出 我们当前选中的详情页的数量
    const current = list.value.reduce((memo, current) => ((memo += current.goodsCount), memo), 0)
    return current
  })

  const total = computed(() => {
    return list.value.reduce((memo, current) => {
      if (current.checked) {
        // 选中就累加
        memo += current.goodsCount * current.sellingPrice
      }
      return memo
    }, 0)
  })
  const isCheckedAll = computed({
    get() {
      return list.value.every((item) => item.checked)
    },
    set(newVal) {
      list.value.forEach((item) => (item.checked = newVal))
    }
  })
  return {
    total,
    isCheckedAll,
    badge,
    hasCartStore,
    list,
    getShopCartList,
    setShopCartItem,
    removeShopCartItem,
    addShopCartItem
  }
})

搜索操作

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import { useCartStore } from '@/stores/cart'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/category',
      meta: { title: '分类' },
      name: 'category',
      component: () => import('../views/Category.vue')
    },
    {
      path: '/cart',
      name: 'cart',
      component: () => import('../views/Cart.vue'),
      meta: {
        needLogin: true // 需要登录才能访问的 我们需要配置这个属性
      }
    },
    {
      path: '/user',
      name: 'user',
      component: () => import('../views/User.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login.vue')
    },
    {
      path: '/detail/:id',
      name: 'detail',
      meta: {
        needLogin: true
      },
      component: () => import('../views/Detail.vue')
    },
    {
      path: '/search',
      name: 'search',
      meta: {
        needLogin: true
      },
      component: () => import('../views/Search.vue')
    }
  ]
})

// 鉴权看是否登录过
router.beforeEach(async (to) => {
  let token = localStorage.getItem('token')
  if (token) {
    // 如果有token 说明登录成功，但是如果你访问的还是登录
    if (to.name === 'login') {
      return { path: '/' }
    }
  } else {
    // 没有登录，跳转到登录页面
    // /a/b  -> ['/a','/a/b']
    if (to.matched.some((item) => item.meta.needLogin)) {
      // 此路由需要登录但是没有登录， 应该跳转到登录页面
      return {
        path: '/login',
        query: {
          redirect: to.path, // 跳转到登录页面，并且告诉登录页面稍后回调回来
          ...to.query // 当前页面的其他参数也添加进去
        }
      }
    }
  }
})
// 如果登陆过查询是否已经获取购物车信息
// 获取购物车的信息存储到pinia中
router.beforeEach(() => {
  let token = localStorage.getItem('token')
  if (token) {
    const store = useCartStore()
    if (!store.hasCartStore) {
      // 如果当前没有获取过购物车信息
      store.getShopCartList()
    }
  }
})
export default router

src/stores/category.js

import { queryCategories } from '@/api'
export const useCategoryStore = defineStore('category', () => {
  const list = ref([]) // 默认所有分类的信息
  async function getCategories() {
    // 获取分类将获取的数据保存到list变量中
    list.value = await queryCategories()
  }
  return { list, getCategories }
})

src/views/Search.vue

数组数据转化-扁平化

层序遍历

const stack = [
  {
    categoryId: 15,
    categoryLevel: 1,
    categoryName: '家电 数码 手机',
    secondLevelCategoryVOS: [
      {
        categoryId: 17,
        parentId: 15,
        categoryLevel: 2,
        categoryName: '家电',
        thirdLevelCategoryVOS: [
          {
            categoryId: 20,
            categoryLevel: 3,
            categoryName: '生活电器'
          },
          {
            categoryId: 110,
            categoryLevel: 3,
            categoryName: 'wer'
          },
          {
            categoryId: 21,
            categoryLevel: 3,
            categoryName: '厨房电器'
          },
          {
            categoryId: 22,
            categoryLevel: 3,
            categoryName: '扫地机器人'
          },
          {
            categoryId: 31,
            categoryLevel: 3,
            categoryName: '空气净化器'
          }
        ]
      },
      {
        categoryId: 19,
        parentId: 15,
        categoryLevel: 2,
        categoryName: '手机',
        thirdLevelCategoryVOS: [
          {
            categoryId: 45,
            categoryLevel: 3,
            categoryName: '荣耀手机'
          },
          {
            categoryId: 57,
            categoryLevel: 3,
            categoryName: 'vivo'
          },
          {
            categoryId: 58,
            categoryLevel: 3,
            categoryName: '手机以旧换新'
          }
        ]
      }
    ]
  },
  {
    categoryId: 16,
    categoryLevel: 1,
    categoryName: '女装 男装 穿搭',
    secondLevelCategoryVOS: [
      {
        categoryId: 67,
        parentId: 16,
        categoryLevel: 2,
        categoryName: '女装',
        thirdLevelCategoryVOS: [
          {
            categoryId: 76,
            categoryLevel: 3,
            categoryName: '外套'
          }
        ]
      }
    ]
  },
  {
    categoryId: 61,
    categoryLevel: 1,
    categoryName: '家具 家饰 家纺',
    secondLevelCategoryVOS: [
      {
        categoryId: 70,
        parentId: 61,
        categoryLevel: 2,
        categoryName: '家具',
        thirdLevelCategoryVOS: [
          {
            categoryId: 77,
            categoryLevel: 3,
            categoryName: '沙发'
          }
        ]
      }
    ]
  }
]
const result = []
console.log(`0. stack-->`, JSON.parse(JSON.stringify(stack)))

// 树的遍历， 层序遍历
let index = 0 // 指针
let current
// 递归会出现爆栈的问题，避免用递归
while ((current = stack[index++]) != null) {
  if (current.categoryLevel == 1) {
    stack.push(...current.secondLevelCategoryVOS)
    console.log(`1. stack-->`, JSON.parse(JSON.stringify(stack)))
  } else if (current.categoryLevel == 2) {
    stack.push(...current.thirdLevelCategoryVOS)
    console.log(`2. stack-->`, JSON.parse(JSON.stringify(stack)))
  } else {
    result.push({ text: current.categoryName, value: current.categoryId })
    console.log(`3. stack-->`, JSON.parse(JSON.stringify(stack)))
  }
}
console.log(`result-->`, result)

进阶参考

你可能感兴趣的:(vue,重返学习,学习,vue.js,前端)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
枚举的构造函数中抛出异常会怎样 bylijinnan java enum 单例
首先从使用enum实现单例说起。为什么要用enum来实现单例？这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
CMake 教程 aigo C++
转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/ CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 spring Webgis
cvc-complex-type.2.3: Element 'beans' cannot have character Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
<script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的高度，兼容ie,ff,chrome var top = document.documentElement.s
将数据库中的数据转换成dbs文件何必如此 sql dbs
旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：主要生成数据库配置文件(.conf文
在IBATIS中配置SQL语句的IN方式 357029540 ibatis
在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
Spring3 MVC 笔记（一） 7454103 spring mvc bean REST JSF
自从 MVC 这个概念提出来之后 struts1.X struts2.X jsf 。。。。。这个view 层的技术一个接一个！都用过！不敢说哪个绝对的强悍！要看业务，和整体的设计！最近公司要求开发个新系统！
Timer与Spring Quartz 定时执行程序 darkranger spring bean 工作 quartz
有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
大端小端转换，le32_to_cpu 和cpu_to_le32 字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html 小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
Nginx负载均衡配置实例详解 avords
[导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡
乱说的 houxinyou 框架敏捷开发软件测试
从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多，瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。也可以把软件开发理
欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
包冲突问题的解决方法 bingyingao eclipse maven exclusions 包冲突
包冲突是开发过程中很常见的问题：其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就抛如下异常： java.lang.NoClassDefFoundError: Could not in
【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
先来一段废话：实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
sudoku solver in Haskell bookjovi sudoku haskell
这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
java apache ftpClient bro_feng java
最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
面试记录语 chenyu19891124 招聘
或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
Fire Workflow 1.0正式版终于发布了 comsci 工作 workflow Google
Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
Python向脚本传参 daizj python 脚本传参
如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？需要模块：sys 参数个数：len(sys.argv) 脚本名： sys.argv[0] 参数1： sys.argv[1] 参数2： sys.argv[
管理用户分组的命令gpasswd dongwei_6688 passwd
NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
linux mysql fypop linux
enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
Scramble String hcx2013 String
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。 ----广告-----------------------------------------------------
nginx日志切割并使用flume-ng收集日志 liyonghui160com
nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
Oracle死锁解决方法 pda158 oracle
　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
java之List排序 shiguanghui list排序
在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
servlet单例多线程 utopialxw 单例多线程 servlet
转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和 http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的

20230722----重返学习-vue3项目实战-收尾

day-118-one-hundred-and-eighteen-20230722-vue3项目实战-收尾

vue3项目实战-收尾

对数据统一做处理

后退按钮

表单事件初步

验证码组件封装

验证码使用及校验

md5摘要算法

注册登录操作

登录态校验

使用pinia的集成

多层级渲染

{{ content.categoryName }}

新增一个跳转详情页

{{ currentGoods.goodsName }}

请求携带token

处理无效token

购物车相关操作

{{ currentGoods.goodsName }}

购物车列表获取

{{ currentGoods.goodsName }}

Vue.js devtools的使用

购物车数量及添加

{{ currentGoods.goodsName }}

购物车页渲染

{{ info.goodsName }}

{{ info.goodsName }}

购物车页操作

{{ currentGoods.goodsName }}

{{ info.goodsName }}

{{ info.goodsName }}

购物车全选与删除操作

搜索操作

数组数据转化-扁平化

层序遍历

进阶参考

你可能感兴趣的:(vue,重返学习,学习,vue.js,前端)