PHP MySqli CRUD and Vue.js 3 with Composition API using a CDN

PHP MySqli CRUD and Vue.js 3 with Composition API using a CDN

ในบทความนี้จะพาทำมินิโปรเจ็กใช้ Vuejs 3 ทำงานร่วมกันกับ PHP จัดการข้อมูล posts โดยจะใช้ Vuejs เเบบ CDN เเละจะเขียนเเบบ composition api ในฝั่ง Vuejs

ตัวอย่างหน้าตาโปรเจ็ก

โครงสร้างตาราง Posts

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
START TRANSACTION;
SET time_zone = “+00:00”;
CREATE TABLE `posts` (
`id` int(11) NOT NULL,
`userId` int(11) NOT NULL,
`title` varchar(200) NOT NULL,
`body` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
INSERT INTO `posts` (`id`, `userId`, `title`, `body`) VALUES
(1, 1, ‘sunt aut facere repellat provident occaecati excepturi optio reprehenderit’, ‘quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto’),
(2, 1, ‘qui est esse’, ‘est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla’),
(3, 1, ‘ea molestias quasi exercitationem repellat qui ipsa sit aut’, ‘et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut’),
(4, 1, ‘eum et est occaecati’, ‘ullam et saepe reiciendis voluptatem adipiscinsit amet autem assumenda provident rerum culpanquis hic commodi nesciunt rem tenetur doloremque ipsam iurenquis sunt voluptatem rerum illo velit’),
(5, 1, ‘nesciunt quas odio’, ‘repudiandae veniam quaerat sunt sednalias aut fugiat sit autem sed estnvoluptatem omnis possimus esse voluptatibus quisnest aut tenetur dolor neque’),
(6, 1, ‘dolorem eum magni eos aperiam quia’, ‘ut aspernatur corporis harum nihil quis provident sequinmollitia nobis aliquid molestiaenperspiciatis et ea nemo ab reprehenderit accusantium quasnvoluptate dolores velit et doloremque molestiae’),
(7, 1, ‘magnam facilis autem’, ‘dolore placeat quibusdam ea quo vitaenmagni quis enim qui quis quo nemo aut saepenquidem repellat excepturi ut quiansunt ut sequi eos ea sed quas’),
(8, 1, ‘dolorem dolore est ipsam’, ‘dignissimos aperiam dolorem qui eumnfacilis quibusdam animi sint suscipit qui sint possimus cumnquaerat magni maiores excepturinipsam ut commodi dolor voluptatum modi aut vitae’),
(9, 1, ‘nesciunt iure omnis dolorem tempora et accusantium’, ‘consectetur animi nesciunt iure dolorenenim quia adnveniam autem ut quam aut nobisnet est aut quod aut provident voluptas autem voluptas’),
(10, 1, ‘optio molestias id quia eum’, ‘quo et expedita modi cum officia vel magnindoloribus qui repudiandaenvero nisi sitnquos veniam quod sed accusamus veritatis error’),
(11, 2, ‘et ea vero quia laudantium autem’, ‘delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibusnaccusamus in eum beatae sitnvel qui neque voluptates ut commodi qui inciduntnut animi commodi’),
(12, 2, ‘in quibusdam tempore odit est dolorem’, ‘itaque id aut magnamnpraesentium quia et ea odit et ea voluptas etnsapiente quia nihil amet occaecati quia id voluptatemnincidunt ea est distinctio odio’),
(13, 2, ‘dolorum ut in voluptas mollitia et saepe quo animi’, ‘aut dicta possimus sint mollitia voluptas commodi quo doloremqueniste corrupti reiciendis voluptatem eius rerumnsit cumque quod eligendi laborum minimanperferendis recusandae assumenda consectetur porro architecto ipsum ipsam’),
(14, 2, ‘voluptatem eligendi optio’, ‘fuga et accusamus dolorum perferendis illo voluptasnnon doloremque neque facerenad qui dolorum molestiae beataensed aut voluptas totam sit illum’),
(15, 2, ‘eveniet quod temporibus’, ‘reprehenderit quos placeatnvelit minima officia dolores impedit repudiandae molestiae namnvoluptas recusandae quis delectusnofficiis harum fugiat vitae’),
(16, 2, ‘sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio’, ‘suscipit nam nisi quo aperiam autnasperiores eos fugit maiores voluptatibus quianvoluptatem quis ullam qui in alias quia estnconsequatur magni mollitia accusamus ea nisi voluptate dicta’),
(17, 2, ‘fugit voluptas sed molestias voluptatem provident’, ‘eos voluptas et aut odit natus earumnaspernatur fuga molestiae ullamndeserunt ratione qui eosnqui nihil ratione nemo velit ut aut id quo’),
(18, 2, ‘voluptate et itaque vero tempora molestiae’, ‘eveniet quo quisnlaborum totam consequatur non dolornut et est repudiandaenest voluptatem vel debitis et magnam’),
(19, 2, ‘adipisci placeat illum aut reiciendis qui’, ‘illum quis cupiditate provident sit magnamnea sed aut omnisnveniam maiores ullam consequatur atquenadipisci quo iste expedita sit quos voluptas’),
(20, 2, ‘doloribus ad provident suscipit at’, ‘qui consequuntur ducimus possimus quisquam amet similiquensuscipit porro ipsam ametneos veritatis officiis exercitationem vel fugit aut necessitatibus totamnomnis rerum consequatur expedita quidem cumque explicabo’),
(21, 1, ‘sunt aut facere repellat provident occaecati excepturi optio reprehenderit’, ‘quia et suscipitrnsuscipit recusandae consequuntur expedita et cumrnreprehenderit molestiae ut ut quas totamrnnostrum rerum est autem sunt rem eveniet architecto’),
(22, 1322124126, ‘ddddds’, ‘aaaaaaaaa’),
(24, 1, ‘opppppppwqqq’, ‘ssf x’),
(25, 1, ‘sunt aut facere repellat provident occaecati excepturi optio reprehenderit’, ‘quia et suscipitrnsuscipit recusandae consequuntur expedita et cumrnreprehenderit molestiae ut ut quas totamrnnostrum rerum est autem sunt rem eveniet architecto’),
(26, 1, ‘sunt aut facere repellat provident occaecati excepturi optio reprehenderit’, ‘quia et suscipitrnsuscipit recusandae consequuntur expedita et cumrnreprehenderit molestiae ut ut quas totamrnnostrum rerum est autem sunt rem eveniet architecto’),
(27, 1, ‘sunt aut facere repellat provident occaecati excepturi optio reprehenderit’, ‘quia et suscipitrnsuscipit recusandae consequuntur expedita et cumrnreprehenderit molestiae ut ut quas totamrnnostrum rerum est autem sunt rem eveniet architecto’),
(28, 1322124126, ‘aaa’, ‘ddddd’),
(29, 1322124126, ‘dddddddas’, ‘wwwwwwww’);
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);
ALTER TABLE `posts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32;
COMMIT;

โครงสร้างไฟล์โปรเจ็ก

ในโปรเจ็กนี้ผมจะใช้ทุกอย่าง Lib ต่างๆเป็นเเบบ CD หมดนะครับ เพื่อขึ้นโปรเจ็กได้ง่ายเเละรวดเร็ว

เริ่มสร้างโปรเจ็ก

Leave a Reply

Your email address will not be published. Required fields are marked *