react电商商品列表的实现流程详解
目录
- 整体页面效果
- 项目技术点
- 拦截器的配置
- 主页面
- 添加商品
- 分页与搜索
- 修改商品
- 删除商品
- 完整代码
整体页面效果
项目技术点
- antd组件库，@ant-design/icons antd的图标库
- axios 接口请求，拦截器配置
- node-sass sass-loader css样式的一个嵌套
- react-router-dom react路由使用
- react-redux redux
- hooks：大多数我们用的是函数组件，函数组件没有state属性，所以我们使用hooks来初始化数据，并且函数组件没有生命周期
拦截器的配置
由于我们登录成功之后，需要我们获取到token令牌之后，我们才能获取到数据，如果每个页面都需要获取一次token，代码比较啰嗦，所以我们配置了一个拦截器
需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
//配置拦截器
import axios from "axios";
//2. 创建对象
const Server = axios.create({
baseURL:"http://api.xiaohuihui0728.cn:8888/api/private/v1/",//基地址
timeout:5000,
})
//3. 请求拦截器
Server.interceptors.request.use((config)=>{
//前置拦截器请求发送出去之前触发
console.log(config);
//增加一个token值
let token = sessionStorage.getItem("token");
config.headers["Authorization"] = token;
return config;
},(err)=>Promise.reject(err));
//4. 响应拦截器
Server.interceptors.response.use((response)=>{
//请求成功，服务端返回数据到客户端之前触发
return response.data;
},(err)=>Promise.reject(err))
//5.抛出Serve对象的内容
export default Server;
主页面
我们的数据写在columns里面，在里面的dataIndex绑定我们获取到的数据
const columns = [
{
title: '商品名称',
dataIndex: 'goods_name',
key: 'username',
},
{
title: '商品价格',
dataIndex: 'goods_price',
key: 'email',
},
{
title: '商品重量',
dataIndex: 'goods_weight',
key: 'mobile',
},
{
title: '创建时间',
dataIndex: 'goods_state',
key: 'role_name',
},
{
title: '操作',
key: 'action',
render: (_, record) => {
return (
<>
<Button type="primary" size="small" onClick={() => { showedit(record.goods_id) }}> <EditOutlined /> </Button>
<Button type="primary" size="small" danger onClick={() => { delGoods(record.goods_id) }} > <DeleteOutlined /> </Button>
</>
)
}
}
];
const [userData, setUserData] = useState([])
// 初始化数据
useEffect(() => {
getUserData()
setPage(1)
}, [search, page, pageSize])
// 初始化请求数据 用户
const getUserData = async () => {
console.log(pageSize);
console.log(search);
console.log(page);
let { data } = await axios.get(`goods?pagenum=${page}&query=${search}&pagesize=${pageSize}`)
console.log(data.goods);
if (data) {
setTotal(data.total);
setUserData(data.goods);
}
}
<Table pagination={false} bordered dataSource={userData} columns={columns} rowKey={(record) => record.goods_id} />
添加商品
添加弹出对话框，添加里面有一个上传图片，我们上传的图片有一个单独的添加接口，所以我们使用action属性绑定我们要上传的路径，headres获取token，使用onChange获取图片上传的路径，然后在我们点击提交form表单数据时把图片临时地址添加成功
// 添加弹窗状态
const [addIsModalVisible, setAddIsModalVisible] = useState(false);
// 存图片
let [img,setimg] = useState("");
// 添加取消
const addHandleCancel = () => {
setAddIsModalVisible(false);
};
//获取token
let token = sessionStorage.getItem("token");
// 添加商品
const onAdd = async (value)=>{
console.log(value);
let pics = [{pic:img}];
let data= await axios.post("goods",{...value,pics})
setAddIsModalVisible(false);
getUserData()
}
//图片上传
const success = (info)=>{
if(info.file.status==="done"){
console.log(info.file.response.data.tmp_path);
setimg(info.file.response.data.tmp_path)
}
}
<Modal title="商品添加" visible={addIsModalVisible} footer={null} ref={addFormRef}>
<Form
name="basic"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onAdd}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="商品名称"
name="goods_name"
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品价格"
name="goods_price"
rules={[{ required: true, message: '请输入商品价格' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品数量"
name="goods_number"
rules={[{ required: true, message: '请输入商品数量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品重量"
name="goods_weight"
rules={[{ required: true, message: '请输入商品重量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品图片"
name="pics"
>
<Upload {...props} action='http://api.xiaohuihui0728.cn:8888/api/private/v1/upload'
headers={{"Authorization":token}} onChange={success} listType='picture'>
<Button type='primary'>上传图片</Button>
</Upload>
</Form.Item>
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 16 }}>
<Button type="primary" htmlType="submit" >
Submit
</Button>
<Button type="primary" onClick={() => { (addHandleCancel()) }} danger>
取消
</Button>
</Form.Item>
</Form>
</Modal>
<Button type="primary" onClick={showModal}> <EditOutlined /> 添加商品 </Button>
分页与搜索
我们在获取数据的时候，就获取我们的分页条数和总数以及搜索的关键字，然后在分页中进行数据属性的配置即可
// 搜索
let [search, setSearch] = useState("")
// 总条数
let [total, setTotal] = useState(0)
// 当前页
let [page, setPage] = useState(1)
// 每页条数
let [pageSize, setPageSize] = useState(2)
// 搜索
const onSearch = (val) => {
setSearch(val)
}
// 分页
const onChange = (page, pageSize) => {
setPage(page)
setPageSize(pageSize)
}
// 初始化请求数据 用户
const getUserData = async () => {
console.log(pageSize);
console.log(search);
console.log(page);
let { data } = await axios.get(`goods?pagenum=${page}&query=${search}&pagesize=${pageSize}`)
console.log(data.goods);
if (data) {
setTotal(data.total);
setUserData(data.goods);
}
}
<Search allowClear placeholder="input search text" onSearch={onSearch} enterButton style={{ width: 300, height: 60 }} />
<Pagination
className='pagination'
total={total}
showSizeChanger
showQuickJumper
pageSizeOptions={[10, 20, 30]}
defaultPageSize={2}
showTotal={(total) => `Total ${total} items`}
onChange={onChange}
/>
修改商品
我们在点击修改弹出对话框的同时，需要把数据绑定到输入框内，我们利用formRef.current.setFieldsValue进行数据回填，然后请求修改接口即可
// 修改弹出框
const [isModalVisible, setIsModalVisible] = useState(false);
// 修改弹出框，数据回填
const showedit = async (e) => {
setIsModalVisible(true);
setgoodid(e)
let { data } = await axios.get(`goods/${e}`)
console.log(data);
formRef.current.setFieldsValue({
goods_name: data.goods_name,
goods_price: data.goods_price,
goods_number: data.goods_number,
goods_weight: data.goods_weight
})
};
// 修改取消按钮
const editHandleCancel = () => {
setIsModalVisible(false)
}
// 修改商品
const onFinish = async (values) => {
let { meta } = await axios.put(`goods/${goodid}`, {
goods_name: values.goods_name,
goods_number: values.goods_number,
goods_price: values.goods_price,
goods_weight: values.goods_weight
})
// console.log(data);
if (meta.status === 200) {
message.success(meta.msg)
setIsModalVisible(false);
getUserData()
} else {
message.info(meta.msg)
setIsModalVisible(false);
}
};
<Button type="primary" size="small" onClick={() => { showedit(record.goods_id) }}> <EditOutlined /> </Button>
{/* 修改弹出框 */}
<Modal title="修改商品" visible={isModalVisible} footer={null}>
<Form
name="basic"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
{...layout}
ref={formRef}
>
<Form.Item
label="商品名称"
name="goods_name"
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品价格"
name="goods_price"
rules={[{ required: true, message: '请输入商品价格' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品数量"
name="goods_number"
rules={[{ required: true, message: '请输入商品数量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品重量"
name="goods_weight"
rules={[{ required: true, message: '请输入商品重量' }]}
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button type="primary" onClick={() => { (editHandleCancel()) }} danger>
取消
</Button>
</Form.Item>
</Form>
</Modal>
删除商品
点击删除按钮传递一个id，然后请求删除接口即可
// 删除
const delGoods = async (e) => {
console.log(e);
let { meta } = await axios.delete(`goods/${e}`)
switch (meta.status) {
case 200:
message.success(meta.msg)
break;
default:
message.warning("删除失败")
break;
}
getUserData()
}
<Button type="primary" size="small" danger onClick={() => { delGoods(record.goods_id) }} > <DeleteOutlined /> </Button>
完整代码
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, message, Modal, Pagination, Table, Upload } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import axios from '../utils/request';
import './goods.scss';
const { Search } = Input;
const props = {
name: 'file',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text',
}
}
export default function Goods() {
let formRef = useRef()
let addFormRef = useRef(null)
const [userData, setUserData] = useState([])
// 添加弹窗状态
const [addIsModalVisible, setAddIsModalVisible] = useState(false);
// 存图片
let [img,setimg] = useState("");
// 搜索
let [search, setSearch] = useState("")
// 总条数
let [total, setTotal] = useState(0)
// 当前页
let [page, setPage] = useState(1)
// 修改弹出框
const [isModalVisible, setIsModalVisible] = useState(false);
// 每页条数
let [pageSize, setPageSize] = useState(2)
const [goodid, setgoodid] = useState(0)
const showModal = () => {
setAddIsModalVisible(true);
};
// 修改商品
const onFinish = async (values) => {
let { meta } = await axios.put(`goods/${goodid}`, {
goods_name: values.goods_name,
goods_number: values.goods_number,
goods_price: values.goods_price,
goods_weight: values.goods_weight
})
// console.log(data);
if (meta.status === 200) {
message.success(meta.msg)
setIsModalVisible(false);
getUserData()
} else {
message.info(meta.msg)
setIsModalVisible(false);
}
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
// 修改弹出框，数据回填
const showedit = async (e) => {
setIsModalVisible(true);
setgoodid(e)
let { data } = await axios.get(`goods/${e}`)
console.log(data);
formRef.current.setFieldsValue({
goods_name: data.goods_name,
goods_price: data.goods_price,
goods_number: data.goods_number,
goods_weight: data.goods_weight
})
};
// 初始化数据
useEffect(() => {
getUserData()
setPage(1)
}, [search, page, pageSize])
// 添加
const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
// 添加取消
const addHandleCancel = () => {
setAddIsModalVisible(false);
};
// 修改取消按钮
const editHandleCancel = () => {
setIsModalVisible(false)
}
// 删除
const delGoods = async (e) => {
console.log(e);
let { meta } = await axios.delete(`goods/${e}`)
switch (meta.status) {
case 200:
message.success(meta.msg)
break;
default:
message.warning("删除失败")
break;
}
getUserData()
}
// 初始化请求数据 用户
const getUserData = async () => {
console.log(pageSize);
console.log(search);
console.log(page);
let { data } = await axios.get(`goods?pagenum=${page}&query=${search}&pagesize=${pageSize}`)
console.log(data.goods);
if (data) {
setTotal(data.total);
setUserData(data.goods);
}
}
const columns = [
{
title: '商品名称',
dataIndex: 'goods_name',
key: 'username',
},
{
title: '商品价格',
dataIndex: 'goods_price',
key: 'email',
},
{
title: '商品重量',
dataIndex: 'goods_weight',
key: 'mobile',
},
{
title: '创建时间',
dataIndex: 'goods_state',
key: 'role_name',
},
{
title: '操作',
key: 'action',
render: (_, record) => {
return (
<>
<Button type="primary" size="small" onClick={() => { showedit(record.goods_id) }}> <EditOutlined /> </Button>
<Button type="primary" size="small" danger onClick={() => { delGoods(record.goods_id) }} > <DeleteOutlined /> </Button>
</>
)
}
}
];
// 搜索
const onSearch = (val) => {
setSearch(val)
}
// 分页
const onChange = (page, pageSize) => {
setPage(page)
setPageSize(pageSize)
}
let token = sessionStorage.getItem("token");
// 添加商品
const onAdd = async (value)=>{
console.log(value);
let pics = [{pic:img}];
let data= await axios.post("goods",{...value,pics})
setAddIsModalVisible(false);
getUserData()
}
const success = (info)=>{
if(info.file.status==="done"){
console.log(info.file.response.data.tmp_path);
setimg(info.file.response.data.tmp_path)
}
}
return (
<div className='goods'>
{/* 主体表格区域 */}
<Card >
<Search allowClear placeholder="input search text" onSearch={onSearch} enterButton style={{ width: 300, height: 60 }} />
<Button type="primary" onClick={showModal}> <EditOutlined /> 添加商品 </Button>
<Table pagination={false} bordered dataSource={userData} columns={columns} rowKey={(record) => record.goods_id} />
<Pagination
className='pagination'
total={total}
showSizeChanger
showQuickJumper
pageSizeOptions={[10, 20, 30]}
defaultPageSize={2}
showTotal={(total) => `Total ${total} items`}
onChange={onChange}
/>
</Card>
<Modal title="商品添加" visible={addIsModalVisible} footer={null} ref={addFormRef}>
<Form
name="basic"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onAdd}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="商品名称"
name="goods_name"
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品价格"
name="goods_price"
rules={[{ required: true, message: '请输入商品价格' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品数量"
name="goods_number"
rules={[{ required: true, message: '请输入商品数量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品重量"
name="goods_weight"
rules={[{ required: true, message: '请输入商品重量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品图片"
name="pics"
>
<Upload {...props} action='http://api.xiaohuihui0728.cn:8888/api/private/v1/upload'
headers={{"Authorization":token}} onChange={success} listType='picture'>
<Button type='primary'>上传图片</Button>
</Upload>
</Form.Item>
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 16 }}>
<Button type="primary" htmlType="submit" >
Submit
</Button>
<Button type="primary" onClick={() => { (addHandleCancel()) }} danger>
取消
</Button>
</Form.Item>
</Form>
</Modal>
{/* 修改弹出框 */}
<Modal title="修改商品" visible={isModalVisible} footer={null}>
<Form
name="basic"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
{...layout}
ref={formRef}
>
<Form.Item
label="商品名称"
name="goods_name"
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品价格"
name="goods_price"
rules={[{ required: true, message: '请输入商品价格' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品数量"
name="goods_number"
rules={[{ required: true, message: '请输入商品数量' }]}
>
<Input />
</Form.Item>
<Form.Item
label="商品重量"
name="goods_weight"
rules={[{ required: true, message: '请输入商品重量' }]}
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button type="primary" onClick={() => { (editHandleCancel()) }} danger>
取消
</Button>
</Form.Item>
</Form>
</Modal>
</div>
)
}
到此这篇关于react电商商品列表的实现流程详解的文章就介绍到这了,更多相关react商品列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React虚拟列表的实现
1.背景 在开发过程中,总是遇到很多列表的显示.当上数量级别的列表渲染于浏览器,终会导致浏览器的性能下降.如果数据量过大,首先渲染极慢,其次页面直接卡死.当然,你可以选择其他方式避免.例如分页,或者下载文件等等.我们这里讨论如果使用虚拟列表来解决这个问题. 2.什么是虚拟列表 最简单的描述:列表滚动时,变更可视区域内的渲染元素. 通过 [单条数据预估高度] 计算出 [列表总高度]和[可视化区域高度 ].并在[可视化区域高度]内按需渲染列表. 3.相关概念简介 下面介绍在组件中,很重要的一些参数信
-
关于react中列表渲染的局部刷新问题
目录 react中列表渲染的局部刷新 react实现实时/局部刷新 初始做法示例 增加数据 修改数据 删除数据 react中列表渲染的局部刷新 最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过react的列表方法渲染: let list=[ { id:1, show:false }, {
-
React 中的列表渲染要加 key的原因分析
目录 为什么需要 key? 列表渲染不提供 key 会怎样? 列表渲染的 key 用数组索引会怎样? 应该用什么值作为 key? 结尾 在 React 中我们经常需要渲染列表,比如展示好友列表. 常用写法是用 Arrary.prototype.map 方法,将数组形式的数据映射为 JSX.Element 数组,并嵌入到组件要返回的 JSX.Element 中,如下: function FriendList() { const [items, setItems] = useState(['我们',
-
React列表栏及购物车组件使用详解
本文实例为大家分享了React列表栏及购物车组件的具体代码,供大家参考,具体内容如下 一.组件介绍 商家详细界面(StoreDetail组件): import React from 'react'; import axios from 'axios'; import GoBack from '../smallPage/GoBack'; import '../../Assets/css/storeDetail.css'; import MenuList from '../../Mock/MenuL
-
ReactNative列表ListView的用法
最近在学习ReactNative,本文介绍了ReactNative列表ListView的用法,分享给大家,也给自己留个笔记 ListView 在Android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView的数据源,其次是ListView每个item的样式.ReactNative中一样.首先我们来看一个简单的例子: constructor(props) { super(props); var ds = new ListView.DataSource({rowH
-
React实现点击删除列表中对应项
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框(不能删错了啊). 先说第一种方法 问题刚上手,首先规划级别:一个输入框和对应删除按钮为一个子组件,整体为父组件即可方便处理. 注意的点:生成的一坨输入框是一个数组,为了准确删掉对应项,生成时要编号.点击删除按钮要反馈对应编号,然后进行删除. 现在的逻辑是:整个待展示列表(由子组件组成的数组)是个st
-
react电商商品列表的实现流程详解
目录 整体页面效果 项目技术点 拦截器的配置 主页面 添加商品 分页与搜索 修改商品 删除商品 完整代码 整体页面效果 项目技术点 antd组件库,@ant-design/icons antd的图标库 axios 接口请求,拦截器配置 node-sass sass-loader css样式的一个嵌套 react-router-dom react路由使用 react-redux redux hooks:大多数我们用的是函数组件,函数组件没有state属性,所以我们使用hooks来初始化数据,并且函
-
react组件的创建与更新实现流程详解
目录 React源码执行流程图 legacyRenderSubtreeIntoContainer legacyCreateRootFromDOMContainer createLegacyRoot ReactDOMBlockingRoot createRootImpl createContainer createFiberRoot createHostRootFiber createFiber updateContainer 总结 这一章节就来讲讲ReactDOM.render()方法的内部实现
-
react时间分片实现流程详解
目录 什么是时间分片 为什么需要时间分片 实现分片开启 - 固定 为什么用performance.now()而不用Date.now() 实现分片中断.重启 - 连续 分片中断 分片重启 实现延迟执行 - 有间隔 为什么选择宏任务实现异步执行 时间分片异步执行方案的演进 时间分片简单实现 总结 我们常说的调度,可以分为两大模块,时间分片和优先级调度 时间分片的异步渲染是优先级调度实现的前提 优先级调度在异步渲染的基础上引入优先级机制控制任务的打断.替换. 本节将从时间分片的实现剖析react的异步
-
React实现卡片拖拽效果流程详解
前提摘要: 学习宋一玮 React 新版本 + 函数组件 &Hooks 优先 开篇就是函数组件+Hooks 实现的效果如下: 学到第11篇了 照葫芦画瓢,不过老师在讲解的过程中没有考虑拖拽目标项边界问题,我稍微处理了下这样就实现拖拽流畅了 下面就是主要的代码了,实现拖拽(src/App.js): 核心在于标记当前项,来源项,目标项,并且在拖拽完成时对数据处理,更新每一组数据(useState): /** @jsxImportSource @emotion/react */ // 上面代码是使用e
-
微信小程序支付及退款流程详解
首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可.我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西.所以使用其他后端语言的朋友有需要也是可以看一下的.很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑.好的,也不说什么废话了.进入正题. 一. 支付 支付主要分为几个步骤: 前端携带支付需要的数据(商品id,购
-
Java代码生成器的制作流程详解
1. 前言 前几天写了篇关于Mybatis Plus代码生成器的文章,不少同学私下问我这个代码生成器是如何运作的,为什么要用到一些模板引擎,所以今天来说明下代码生成器的流程. 2. 代码生成器的使用场景 我们在编码中存在很多样板代码,格式较为固定,结构随着项目的迭代也比较稳定,而且数量巨大,这种代码写多了也没有什么技术含量,在这种情况下代码生成器可以有效提高我们的效率,其它情况并不适于使用代码生成器. 3. 代码生成器的制作流程 首先我们要制作模板,把样板代码的固定格式抽出来.然后把动态属性绑定
-
基于PHP的微信公众号的开发流程详解
微信公众号开发分傻瓜模式和开发者模式两种,前者不要考虑调用某些接口,只要根据后台提示傻瓜式操作即可,适用于非专业开发人员. 开发模式当然就是懂程序开发的人员使用的. 下面简单说一下微信公众号开发的简易流程,新手看看会有帮助,高手请一笑而过. 1.配置服务器: A.首先在本机建立如下结构的文件夹(这里是我自己的习惯,仅供参考) MMPN:总目录mro message public number 微信公众号 backup:备份目录,主要用于备份php文件,每次修改时将原稿备份到里面去. images
-
php操作ElasticSearch搜索引擎流程详解
目录 一.安装 二.使用 三.新建ES数据库 四.创建表 五.插入数据 六. 查询所有数据 七.查询单条数据 八.搜索 九.测试代码 〝 古人学问遗无力,少壮功夫老始成 〞 如果这篇文章能给你带来一点帮助,希望给飞兔小哥哥一键三连,表示支持,谢谢各位小伙伴们. 一.安装 通过composer安装 composer require 'elasticsearch/elasticsearch' 二.使用 创建ES类 <?php require 'vendor/autoload.php'; //如果未设
-
微信小程序访问mysql数据库流程详解
目录 1 开通云上的mysql 2 创建自定义连接器 3 创建云函数 4 安装依赖 5 出参映射 6 在小程序中使用连接器 总结 1 开通云上的mysql 经过询价,我发现阿里云的数据库是比较便宜的,新人购买非常划算.对于爱学习的博主来说,果断购买一个. 按照操作指引购买后,云会帮你创建一系列的环境,在控制台就可以看到属于自己的实例 点击操作列上的管理,就可以创建我们自己的数据库.配置的步骤是先创建数据库的账号 然后创建一个数据库 都设置好之后就可以登录数据库,创建表,加数据了 刚创建好的数据库
-
C++模拟实现vector流程详解
目录 模拟vector 总结 模拟vector 我们可以通过模板实现类似vector的类.我们实现一个StrVecTemp类,其内部通过allocator开辟空间,存储的类型用T来表示,T是模板类型. template <typename T> class StrVecTemp { public: StrVecTemp() : elements(nullptr), first_free(nullptr), cap(nullptr) {} //拷贝构造函数 StrVecTemp(const St